javascript - 当用户尝试滚动时禁用滚动但仍然跟踪

Question

快速免责声明 - 我知道有类似的问题，但它们没有提供我正在寻找的答案。

我试图在页面加载时完全禁用滚动，但仍然能够在用户尝试滚动时监听。目标是当用户尝试滚动时触发动画功能，一旦动画完成，滚动将重新启用回到正常状态。

我尝试禁用滚动并在用户尝试像这样滚动后播放我的动画:

function blogHeaderMagic() {
 //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, onComplete: allowScroll });
 scrolled = true
 }

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

虽然这很有效，但在 Chrome 或 Safari 中，效果并不是那么流畅，因为当用户第一次尝试滚动时，滚动会被启用，因此他们可以从顶部滚动 100 像素，然后滚动锁定。这就是为什么我首先想禁用滚动，当用户尝试滚动(尽管他们无法)时，我想检测他们的滚动尝试并在该检测上触发我的动画功能。这可能吗？

Answer 1

回答

您可以将正文标记设置为 overflow:hidden;这将不允许用户滚动并使用这些事件处理程序，然后放回 overflow属性为无论它是什么(如果您一开始就没有更改它，则可能是 auto)。

// IE9, Chrome, Safari, Opera
document.body.addEventListener("mousewheel", MouseWheelHandler, false);
// Firefox
document.body.addEventListener("DOMMouseScroll", MouseWheelHandler, false);

function MouseWheelHandler() {
    alert('scrolling with the mouse');
    document.body.style.overflow = 'auto'
    document.body.removeEventListener("mousewheel", MouseWheelHandler, false);
    document.body.removeEventListener("DOMMouseScroll", MouseWheelHandler, false);
}

有趣的链接

我做了一个快速的 codepen 示例。 See here

Also this article

编辑----------------

还发现了这个Stack Overflow question

我不认为有一种纯JS的方法可以禁用所有滚动，同时仍然检测来自用户的滚动事件(只需重读您的问题)，这就是为什么我认为溢出解决方案是最简单/最优雅的解决方案(我可以来与)。

您始终可以检测滚动并将滚动位置设置为顶部，例如 window.scroll(0,0)和/或 window.scrollTo(0,0) 。从我的测试来看，它似乎不太有效。