Jak zapobiec przewijaniu strony po przewinięciu do dołu elementu div wewnątrz?

Question

Mam kilka DIV na mojej stronie, które wyglądają tak:

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

Gdy użytkownik znajdzie się nad nimi i zwoje z kółkiem przewijania one w porządku. Problem polega na tym, że gdy użytkownik dojdzie do dna, sama strona zacznie się przewijać.

Czy istnieje sposób, aby temu zapobiec (przy użyciu javascript w razie potrzeby), tak aby fokus pozostanie na div, nawet jeśli przewija się do dołu, a sama strona przewija się tylko wtedy, gdy użytkownik nie jest unosi się na div ?

Answer 1

Sprawdź to demo: http://jsfiddle.net/zUGKW/1/

Kod:

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