如何防止鼠标在悬停元素外滚动？

Question

我有一个设置为溢出的div：scroll;。我得到滚动条，这是我想要的。但是，当使用鼠标滚轮滚动div时，它会在到达div内容的顶部或底部时滚动页面的其余部分。

如何根据剩余的内容仅滚动div或整个页面？

Answer 1

如果鼠标位于div的范围内，您可以测试鼠标位置并取消文档的滚动事件。

Answer 2

首先，我认为你不能覆盖滚动事件。所以这就是我要做的。我不知道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有焦点然后做同样的事情。取决于您的设置。

Answer 3

在这种情况下，我认为您必须覆盖正文的默认onscroll事件。在你的处理程序中，你需要手动滚动div的内容。