如何防止鼠标滚动到悬停元素之外？ [英] How to prevent mouse scrolling outside hovered element?

问题描述

我有一个设置为溢出的div：scroll ;.我得到了我想要的滚动条。但是，当使用鼠标滚动滚动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.

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