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

Answer 1

答案

你可以将body标签设置为overflow:hidden;，它不允许用户滚动并使用这些事件处理程序，然后将overflow属性放回原来的状态（可能是auto if）你没有改变它。）

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

有趣的链接

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

Also this article

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

还找到了Stack Overflow question

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

您始终可以通过window.scroll(0,0)和/或window.scrollTo(0,0)检测滚动设置滚动位置到顶部。根据我的测试，它似乎并没有很好地发挥作用。

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

1 个答案:

答案

有趣的链接

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