JavaScript onScroll event.preventDefault()

Question

有什么方法可以在滚动事件上使用 preventDefault 吗？容器必须有 overflow-y: scroll。我不想使用 mousewheel preventDefault，因为那样的话我将不得不为鼠标、键盘、触摸屏和滚动条编写解决方案。

那么，如何在下面的 <div> 中禁用滚动？ (jsfiddle)

document.getElementById('container').onscroll = function(event) {
   event.preventDefault();
};

div {
  height: 300px;
  overflow-y: scroll;
  width: 400px;
}

<div id="container">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>

Answer 1

您可以在特定元素上使用 scrollTo() 并将其滚动到上一个位置。假设原来的位置是(0,0)，就可以用那个。但是，如果它以某种方式发生变化，您将需要扩展逻辑以适应该变化。请记住，当用户尝试滚动时，会出现轻微的滚动问题。

工作演示

document.getElementById('container').onscroll = function(event) {
   event.preventDefault();
   document.getElementById('container').scrollTo(0,0);
};

div {
  height: 300px;
  overflow-y: scroll;
  width: 400px;
}

<div id="container">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>

注意：我强烈建议不要这样做，因为拦截滚动事件会给页面的可用性带来很多麻烦，但是如果您对此有把握，那么您可以做什么你必须！

JavaScript onScroll event.preventDefault()

JavaScript onScroll event.preventDefault()

javascript

scroll

preventdefault

工作演示