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

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?

Answer 1

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;
});