如何防止鼠标滚动超出悬停元素？

Question

我有一个 div，它的 overflow 属性被设置为 scroll。我得到了想要的滚动条。但是当使用鼠标滚轮滚动 div 时，当到达 div 内容的顶部或底部时，它会滚动整个页面。

如何根据悬停的位置，仅滚动 div 或整个页面？

- Sakaa

Answer 1

首先，我认为您无法覆盖滚动事件。因此，这是我会做的事情。我不懂jquery，但这里有一些直接的javascript代码。

document.getElementById('scrollDiv').onmouseover=function(){
  document.getElementByTagName('body')[0].style.overflow='hidden';
}
document.getElementById('scrollDiv').onmouseout=function(){
  document.getElementByTagName('body')[0].style.overflow='';
}

显然，你可以稍微调整一下，但这是基本思路。此外，如果需要，您可以执行其他测试用例。例如，如果div具有焦点，则执行相同操作。这取决于您的设置。

- qw3n

---

overflow: hidden 的问题在于它通常会将页面滚动条设置回顶部，这可能会令人困惑。为什么不使用一个 onscroll 监听器来冻结页面的滚动高度呢？ - stefan

Answer 2

您可以测试鼠标位置，并在鼠标位于 div 边界内时取消文档的滚动事件。

- BC.

---

太好了，谢谢。但是我该怎么做呢？你能写一些jQuery代码的示例吗？ - Sakaa

Answer 3

在这种情况下，我认为您将不得不覆盖默认的body滚动事件。在您的处理程序中，您需要手动滚动div的内容。

- manalang