Mouse Scroll breaks Symbol

Hi Everyone

I added a project to illustrate my problem.

When I load a scene, I trigger a timeline inside my symbol.
If I don’t scroll down and up and the scene reloads, the timeline inside my symbol triggers fine again.
When I scroll down and back up and return to the scene, the timeline does not trigger.
It does not make sense.

Any insight will be appreciated.
Thanks
TroubleShootScroll.zip (116.7 KB)

You were missing a bracket in the “window.onscroll” snippet inside the “sticky2” function.

Screen Shot 2020-04-11 at 1.54.28 PM

2 Likes

Thank you @JimScott.

That’s brilliant. I would never have found it!

2 Likes

Hi @JimScott

You are correct that the load of the sticky function(OnScroll), breaks the second load of the scene, but the curly brace also breaks the sticky function. My symbol does not break because the curly brace breaks the sticky function. The bracket should not be in there.

It is almost like the sticky function is still running when we do the second load of the scene, and when we run the sticky function on top of itself it breaks my symbol. Is there a way that we can cancel the sticky function on scene unload maybe?

This bracket does not need to be there, the closing brecket is already below later in the code.


The issue is you are wiping out the classes for the symbol in the scroll code, so on return the runtime cannot find the symbol.

Hype adds it's own class names to each element,scenes and symbols which it uses to map the elements.

Two things use the getter and setter API in hype to get and set the top property.
And modify the class list rather that set the class which wipes the whole class list out.

if (hypeDocument.currentLayoutName() === "Desk+Tablet"){

lastPos = {
y1 : 0,
y2 : 0
}

el = hypeDocument.getElementById('player2D');
sPos =  hypeDocument.getElementProperty(el, 'top')

 
window.onscroll=function(){
wY = window.pageYOffset || (document.body.scrollTop || document.documentElement.scrollTop) ;
lastPos.y1 = lastPos.y2; lastPos.y2 = wY;

if(wY >= sPos){
 
hypeDocument.setElementProperty(el, 'top', 0)
 
 el.classList.add('sticky')
}

if (lastPos.y2 < lastPos.y1 && wY <= sPos){
 
hypeDocument.setElementProperty(el, 'top', sPos)
 el.classList.remove('sticky')
}
}

} else if (hypeDocument.currentLayoutName() === "iPhone"){

lastPos = {
y1 : 0,
y2 : 0
}

el = hypeDocument.getElementById('player2M');
 sPos =  hypeDocument.getElementProperty(el, 'top')// sPos = el.getBoundingClientRect().top;

window.onscroll=function(){
wY = window.pageYOffset || (document.body.scrollTop || document.documentElement.scrollTop) ;
lastPos.y1 = lastPos.y2; lastPos.y2 = wY;

if(wY >= sPos){
 
hypeDocument.setElementProperty(el, 'top', 0)
 
 el.classList.add('sticky')
}
if (lastPos.y2 < lastPos.y1 && wY <= sPos){
 
hypeDocument.setElementProperty(el, 'top',sPos)
 el.classList.remove('sticky')
}
}
};
3 Likes

Thank you @MarkHunte.

Works like a charm. I knew it had to be something that I have no clue about. Although I understood enough to tweak the symbol position on scroll.

I’m grateful.

H

3 Likes

@theron_hp @MarkHunte :+1:

1 Like