How to prevent mouse scrolling outside hovered element ?

Question

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.

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

Answer 1

In this case, I think you'll have to override the default onscroll event for the body. In your handler, you'll need to manually scroll the div's contents.

Answer 2

You could test the mouse position and cancel the scroll events for the document if the mouse is within the bounds of the div.

Answer 3

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='';
}

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.