How can I prevent the page scrolling when I have scrolled to the bottom of a div inside it?

Question

I've got several divs on my page that look like this:

<div style="height:200px; overflow:auto;">
    <div style="height:300px;">
        <!--Lots of text here-->
    </div>
</div>

When the user hovers over them and scrolls with the scroll wheel they scroll fine. The trouble is that, when the user reaches the bottom, the page itself starts scrolling instead.

Is there a way to stop this happening (using javascript if necessary), so that the focus stays on the div even when it has scrolled to the bottom and the page itself only scrolls when the user is not hovered over a div?

This question has been asked before. Here's a [demo](http://jsbin.com/ixura3/3) and the answer can be found here: http://stackoverflow.com/questions/5802467/prevent-scrolling-of-parent-element Basically, you need to bind the mousewheel event and use Javascript to control the scrolling of the child elements. His plug-in also has some interesting demos: http://brandonaaron.net/code/mousewheel/demos — Alex W, May 09 '13 at 13:27

score 2 · Accepted Answer · answered May 09 '13 at 13:30

2

Check this demo: http://jsfiddle.net/zUGKW/1/

Code:

// bind the mousewheel event
$('.myDiv').bind('mousewheel', function(e) {
    // if scroll direction is down and there is nothing more to scroll
    if(e.originalEvent.wheelDelta < 0 && 
    ($(this).scrollTop() + $(this).height()) >= this.scrollHeight) return false;
});

answered May 09 '13 at 13:30

techfoobar

65,616
14
114
135

Whats not right about this? – techfoobar May 09 '13 at 13:32
I've tried it in jfiddle, and it doesn't work. When you scroll to the bottom of the div, then wait a second and scroll again, the page scrolls. – Urbycoz May 09 '13 at 13:34
+1, works for me using Google Chrome 26.0.1410.64 m. – ComFreek May 09 '13 at 13:35
I'm using firefox 20.0.1 and it's not working for me. – Urbycoz May 09 '13 at 13:37
@Urbycoz - Din test in FF. Let me see.. – techfoobar May 09 '13 at 13:37
I can confirm that it's working with Firefox **21.0** under Windows 8. – ComFreek May 09 '13 at 13:41
Yes, some mods needed for FF <= 20 i guess. Mainly using DOMMouseScroll event. – techfoobar May 09 '13 at 13:47

How can I prevent the page scrolling when I have scrolled to the bottom of a div inside it?

1 Answers1