防止所有滚动，直到函数触发 [英] Prevent all scrolling until a function triggers

问题描述

我正在尝试重新创建此效果: http://www.jam3.com/work/#mobilemusicvideo

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.

如何创建它?

我可以使用此功能来防止滚动

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?

推荐答案

感谢@ChrisFrank提供提示.您可以在尝试滚动时触发该功能，并禁用滚动，如下所示:

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();
    }
}

在我的自定义函数中，我禁用了滚动功能(我在此处 )，制作动画并将变量更改为true:

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
}

这篇关于防止所有滚动，直到函数触发的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！