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

this question has answer here:

• prevent scrolling of parent element? 27 answers

i've got several divs on page this:

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

when user hovers on them , scrolls scroll wheel scroll fine. trouble that, when user reaches bottom, page starts scrolling instead.

is there way stop happening (using javascript if necessary), focus stays on div when has scrolled bottom , page scrolls when user not hovered on div?

check demo: http://jsfiddle.net/zugkw/1/

code:

// bind mousewheel event $('.mydiv').bind('mousewheel', function(e) {     // if scroll direction down , there nothing more scroll     if(e.originalevent.wheeldelta < 0 &&      ($(this).scrolltop() + $(this).height()) >= this.scrollheight) return false; });