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

【问题标题】：How to prevent mouse scrolling outside hovered element?如何防止鼠标在悬停元素之外滚动？
【发布时间】：2011-02-28 00:23:10
【问题描述】：

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

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

【问题讨论】：

标签： javascript html css scroll hover

【解决方案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 有焦点然后做同样的事情。取决于您的设置。

【讨论】：

overflow:hidden 的问题是它通常会将页面滚动回顶部，这可能会造成混淆。为什么没有一个 onscroll 监听器来冻结页面的滚动高度？

【解决方案2】：

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

【讨论】：

听起来不错，谢谢，但我该怎么做呢？你能写一些示例jquery代码吗？

【解决方案3】：

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

【讨论】：