當我滾動到div內部的div底部時，如何防止頁面滾動？

我有我的網頁上幾個div的看起來像這樣：當我滾動到div內部的div底部時，如何防止頁面滾動？

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

當用戶將鼠標懸停在他們和滾輪滾動滾動鼠標罰款。麻煩的是，當用戶到達底部時，頁面本身開始滾動。

有沒有辦法阻止這種情況發生（如果有必要使用javascript），以便焦點停留在div上，即使它已經滾動到底部並且頁面本身只在用戶沒有在某個div上進行滾動時才滾動？

來源

2013-05-09 Urbycoz

這個問題已經被問過。這裏有一個[demo]（http://jsbin.com/ixura3/3），答案可以在這裏找到：http://stackoverflow.com/questions/5802467/prevent-scrolling-of-parent-element基本上，你需要綁定mousewheel事件並使用Javascript來控制子元素的滾動。他的插件也有一些有趣的演示： http://brandonaaron.net/code/mousewheel/demos – 2013-05-09 13:27:28

入住這演示：http://jsfiddle.net/zUGKW/1/

代碼：

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

來源

2013-05-09 13:30:37 techfoobar

這有什麼不對的？ – techfoobar 2013-05-09 13:32:39

我試過它在jfiddle中，它不起作用。當您滾動到div的底部時，稍等一會再滾動，頁面會滾動。 – Urbycoz 2013-05-09 13:34:41

+1，適用於我使用Google Chrome 26.0.1410.64米。 – ComFreek 2013-05-09 13:35:41

當我滾動到div內部的div底部時，如何防止頁面滾動？

回答

相關問題