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

How to prevent mouse scrolling outside hovered element?(如何防止鼠标在悬停元素之外滚动?)

问题描述

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

I have a div which is set to overflow:scroll;. I get scrollbars which is what I want. However when scrolling the div with the mousewheel it scrolls the rest of the page when it reaches the top or bottom of the div's content.

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

How can I scroll only the div or the entire page based on what's hovered ?

推荐答案

首先我不认为你可以覆盖滚动事件.所以这就是我要做的.我不知道 jquery，但这里有一些直接的 javascript.

First I don't think you can override the scroll event. So here is what I would do. I don't know jquery but here is some straight 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 有焦点然后做同样的事情.取决于您的设置.

Obviously you could tweak this a little, but this is the basic idea. Also, if you need to you could do other test cases. Like if the div has focus then do the same thing. Depends on your setup.

这篇关于如何防止鼠标在悬停元素之外滚动?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！