Làm cách nào để ngăn cuộn trang khi tôi đã cuộn xuống dưới cùng của một div bên trong?

Question

Tôi đã có một vài divs trên trang của mình trông như thế này:

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

Khi người dùng di chuột qua chúng và cuộn với con lăn họ di chuyển tốt. Vấn đề là, khi người dùng đến phía dưới, bản thân trang sẽ bắt đầu cuộn. Có một cách để ngăn chặn điều này xảy ra (sử dụng javascript nếu cần), để tiêu điểm nằm trên div ngay cả khi nó đã cuộn xuống dưới cùng và trang đó chỉ cuộn khi người dùng không được di chuột qua div ?

Answer 1

Kiểm tra này bản 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; 
});