3

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 ?

mVChr
  • 46,510
  • 10
  • 101
  • 99
Sakaa
  • 33
  • 3

3 Answers3

1

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

BC.
  • 22,131
  • 12
  • 44
  • 62
  • Sounds great, thanks, but how would I go about doing that ? Could you maybe write some sample jquery code? – Sakaa Jun 05 '10 at 00:49
1

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.

qw3n
  • 5,558
  • 4
  • 28
  • 58
  • the problem with overflow: hidden, is that it usually sets the pages scroll back go the top, which can be confusing. why not have an onscroll listener that freezes the page's scroll height? – stefan May 15 '14 at 10:45
0

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.

manalang
  • 795
  • 1
  • 5
  • 10