Prevent all scrolling until a function triggers

Question

I'm trying to recreate this effect: http://www.jam3.com/work/#mobilemusicvideo

All scrolling of the page is disabled until the animation of the top image completes. BUT, that image animation IS triggered when user attempts to scroll.

How can create this?

I am able to prevent scroll with this function:

function disableScroll() {
  if (window.addEventListener) // older FF
      window.addEventListener('DOMMouseScroll', preventDefault, false);
  window.onwheel = preventDefault; // modern standard
  window.onmousewheel = document.onmousewheel = preventDefault; // older browsers, IE
  window.ontouchmove  = preventDefault; // mobile
  document.onkeydown  = preventDefaultForScrollKeys;
}

And re-enable it with this function:

 enter code herefunction enableScroll() {
        if (window.removeEventListener)
            window.removeEventListener('DOMMouseScroll', preventDefault, false);
        window.onmousewheel = document.onmousewheel = null; 
        window.onwheel = null; 
        window.ontouchmove = null;  
        document.onkeydown = null;  
    }

But if I first disable the scroll, how do I trigger a function when user attempts to scroll?

document.onscroll = function(){ preventScroll(); } and inside your disableScroll function you have to have a conditional statement which loads the thing you want. — Chris Frank, Nov 10 '15 at 20:43
Can you give me an example in code? For instance, If on attempt of scroll, I want to hide "div". What would it look like? (sorry I don't understand what conditional statement I would use so seeing a real example would help) — beliy333, Nov 10 '15 at 20:47
`document.getElementById("div").style.display = "none";` This would hide the div. If you wanted to do this on scroll you could put it into the preventScroll function which is fired on scroll by `document.onscroll` in my last comment. — Chris Frank, Nov 10 '15 at 20:50
@ChrisFrank That works thanks. However, if I do a "if var == true" statement around the on scroll function, and changed the variable to false inside the conditional, the function continues to loop. Why is that? I would like to stop the loop if variable changed to false. Here is a js fiddle - http://jsfiddle.net/beliy333/rnd8gun4/ — beliy333, Nov 10 '15 at 22:25
Solution: put the conditional inside of the 'document.onscroll'. So together: `document.onscroll = function() { if( scrolled == false){ blogHeaderMagic() } }` — beliy333, Nov 10 '15 at 23:26

score 0 · Accepted Answer · edited May 23 '17 at 10:27

Thanks to @ChrisFrank for the tip. You could trigger the function on scroll attempt and disable scroll like this:

document.onscroll = function() {
    if( scrolled == false){
        yourCustomFunction();
    }
}

And inside my custom function, I disable scroll (I got this function here), do my animation and change the variable to true:

function blogHeaderMagic() {
     //to re-position scroll to 0 (in my case this was useful)
     $('body,html').animate({scrollTop: 0 }, 1);

     //disable scroll function
     disableScroll()

     //my animation and on a callback you'll see I call allowScroll function to allow scroll normally once animation completes
     TweenMax.to("#post-hero-media-wrapper", 1, {height:54, opacity: .4, width: mainWidth, ease: Power3. easeInOut, y: 0, onComplete: allowScroll });
     scrolled = true
}

Prevent all scrolling until a function triggers

1 Answers1

Linked