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

快速免责声明–我知道有类似的问题，但它们没有提供我想要的答案

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

在用户尝试按如下方式滚动后，我尝试禁用滚动并播放动画：

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中效果很好，但效果并不是很平滑，因为当用户第一次尝试滚动时，滚动被启用，这样他们可以从顶部滚动100px，然后才滚动锁定。这就是为什么我想首先禁用滚动，当用户尝试滚动时（尽管他们无法），我想检测他们滚动的尝试，并在检测时触发我的动画功能。这可能吗

答复 您可以将body标记设置为

overflow:hidden

不允许用户滚动并使用这些事件处理程序，然后将

overflow

属性放回原来的位置（如果您没有首先更改它，则可能是自动的）

有趣的链接 我做了一个快速的代码笔示例

编辑---------------- 也发现了这个

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

---

您可以随时检测滚动，并使用类似于

window.scroll（0,0）

和/或

window.scroll（0,0）

的方法将滚动位置设置到顶部。从我的测试来看，它似乎工作得不太好。

有没有办法做到这一点？我希望避免隐藏溢出。找到另一个可能对您有帮助的链接，将编辑我的答案。

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