禁用滚动但仍跟踪用户尝试滚动时

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

回答

您可以将 body 标记设置为 overflow:hidden;，这将不允许用户滚动和使用这些事件处理程序，然后将 overflow 属性放回原来的状态（如果您没有更改它，可能是自动的首先）。

// 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) 之类的方式检测滚动并将滚动位置设置为顶部。从我的测试来看，它似乎不太好用。