CODEWITHSUNDEEP
javascripthtmlcssscrollhover
Sakaa
Sakaa

Reputation: 33

How to prevent mouse scrolling outside hovered element?

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 ?

Upvotes: 3

Views: 1481

Answers (3)

qw3n
qw3n

Reputation: 6334

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.

Upvotes: 1

BC.
BC.

Reputation: 24918

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

Upvotes: 1

manalang
manalang

Reputation: 805

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.

Upvotes: 0

Related Questions