Dissable scroll under certain conditions

Using JavaScript with Hype
1

Here you can find the current demo:
http://zanate.com.mx/proyectos/alyn/rappi_demo/

The idea is to make the browser to play different videos on the background depending on the scene number.

The thing is that, in order to try to get this to feel as smooth as posible, I trying to disable the scroll while the video on the background is playing and re-enableing it once it the timeline reached the end of the video.

if (hypeDocument.currentSceneName() == '1') {
reverse_video = "reverse_1"
play_video = "foward_2"
}

if (hypeDocument.currentSceneName() == '2') {
reverse_video = "reverse_2"
play_video = "foward_3"
}

if (hypeDocument.currentSceneName() == '3') {
reverse_video = "reverse_3"
play_video = "foward_4"
}


// ====================================== SCROLL ACTIONS
if (scrolltrigger === 'on') {
    $('.triggertext').text(scrolltrigger);
    if (window.addEventListener) {
        window.addEventListener("mousewheel", scrollScene, false);
        window.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.5)
            hypeDocument.functions().stop_allvideos(hypeDocument, element, event);
            hypeDocument.getElementById(reverse_video).style.visibility = "visible"; // PLAY THIS ONE
            hypeDocument.getElementById(reverse_video).currentTime = 0;
            hypeDocument.getElementById(reverse_video).play();
        } else {
            hypeDocument.showNextScene(hypeDocument.kSceneTransitionPushBottomToTop, 0.5)
            hypeDocument.functions().stop_allvideos(hypeDocument, element, event);
            hypeDocument.getElementById(play_video).style.visibility = "visible"; // PLAY THIS ONE
            hypeDocument.getElementById(play_video).currentTime = 0;
            hypeDocument.getElementById(play_video).play();
            hypeDocument.functions().lockscroll(hypeDocument, element, event);
        }
    }
} else if (scrolltrigger === 'off') {
    $('.triggertext').text(scrolltrigger);
window.removeEventListener("mousewheel", scrollScene);
window.removeEventListener("DOMMouseScroll", scrollScene);
}
// ====================================== SCROLL ACTIONS

This is the code I am currently using. You can download the hype file here:

As soon the new scene loads I am setting scrolltrigger = off; and it seems to be picking this change correctly, but the removeEventListener doesn’t seems to be doing anything.

https://www.dropbox.com/s/xmvfauk760mfpmf/rappi_test.zip?dl=1

2

add the eventlistener only once. do not remove it. just put
if(scrolltrigger === 'off')return
as first line to scrollScene.

2 Likes
3

WOW! It is way more elegant and simple that I tough it might be! You are a life saver! Thanks a lot.

4

one thing to clarify: really attach the listeners only once and not on every sceneload. otherwise you collect a bunch of active listeners.their scope is the window-object … so they’ll apply to every scene/layout. so just remove them if do not use or change them … :slight_smile:

1 Like
5

Understood, I have some cleaning to do, thanks again!

6

I was trying to set the events to load only once in a “lobby” scene that runs before anything else, and runs only once.

But, I was getting some console ramblings about e.wheeldelta being undefined.

Eventually I found that using jquery is possible do detect when the mouse scrolls up or down, and seems to run without the need of the window.addEventListener:

//window.addEventListener("mousewheel", scrollScene, false);
//window.addEventListener("DOMMouseScroll", scrollScene, false);
$(window).bind("DOMMouseScroll wheel", function(event) {
    if (scrolltrigger === 'off') return; // https://forums.tumult.com/t/dissable-scroll-under-certain-conditions/17787/2?u=davirus
    if (event.originalEvent.wheelDelta >= 0) {
        hypeDocument.showPreviousScene(hypeDocument.kSceneTransitionPushTopToBottom, 0.5)
        hypeDocument.functions().stop_allvideos(hypeDocument, element, event);
        hypeDocument.getElementById(reverse_video).style.visibility = "visible"; // PLAY THIS ONE
        hypeDocument.getElementById(reverse_video).currentTime = 0;
        hypeDocument.getElementById(reverse_video).play();
        window.scrolltrigger = "off";
    } else {
        hypeDocument.showNextScene(hypeDocument.kSceneTransitionPushBottomToTop, 0.5)
        hypeDocument.functions().stop_allvideos(hypeDocument, element, event);
        hypeDocument.getElementById(play_video).style.visibility = "visible"; // PLAY THIS ONE
        hypeDocument.getElementById(play_video).currentTime = 0;
        hypeDocument.getElementById(play_video).play();
        window.scrolltrigger = "off";
    }
});

Is there a reason to avoid this approach? other than being jquery dependent.