Remove event listener with scroll position scroll scenes

Using JavaScript with Hype
1

Hi,

Was hoping someone could help me with javascript

I’m trying to scroll between scenes, which I’ve implemented with code from other topics on here.

The problem is if a scene’s layout has scrollable content how can I control when this event happens?

The effect should feel like one long page to the user, 1st scene is full viewport, they scroll down which transitions to the next scene, 2nd scene is larger than the viewport height so they should be able to scroll to the bottom (which is fine there is no event fired for scrolling down) but then as soon as they begin to scroll up, it transitions to the previous scene. What I want to Achieve is for that event not to fire until they have scrolled back up to the top of the 2nd scene and then transition to the previous scene.

scene_scrolling copy.zip (22.3 KB)

How I’ve been trying

function myFunction() {



if (document.body.scrollTop > 100 || document.documentElement.scrollTop > 100) {  
	
	
	element.removeEventListener("mousewheel", scrollScene, false);
	element.removeEventListener("DOMMouseScroll", scrollScene, false);

} 

	

element.addEventListener("mousewheel", scrollScene, false);
element.addEventListener("DOMMouseScroll", scrollScene, false);
	
function scrollScene(e){

	var upORdown = Math.max(-1, Math.min(1, (e.wheelDelta || -e.detail)));
	
	if(upORdown === 1){
		hypeDocument.showPreviousScene(hypeDocument.kSceneTransitionPushTopToBottom, 0.6)
	}
}

I was wondering if the jQuery on/ off would help me achieve this. But I don’t know how to write this.

No matter what way I try to arrange the code I can’t get the removeEventListner to work, is the code completely wrong, or am I even thinking about this in the right way??

Any help would be greatly appreciated. I’m not proficient in code at all, so a simplified explanation would also be very appreciated, thanks

2

sounds like this:

two years old, but may work :slight_smile:

1 Like
3

Hi Hans,

That seems to work perfectly, thank you!

So it seems I was thinking about it the wrong way, rather than trying to removeEventListener your code specifies exactly when the function should happen? I was never going to figure that out.

I also added on layout unload: window.onscroll = null;

I don’t know if that’s the right way to do it but it seems to stop the “scroll to previous scene” happening, once you leave the scene. Otherwise it will keep working on all scenes and I only want to link two specific scenes together while not affecting other scenes in the document.

Thanks again

1 Like