僅滾動頁內元素，而不是整個頁面

有沒有注意到，當您用滾輪滾動溢出的div或textarea，並將其滾動到底部時，整個頁面開始滾動？僅滾動頁內元素，而不是整個頁面

可以預防嗎？

我做了一個jQuery的scroll（）事件處理程序的快速測試，但似乎太晚了。

這裏是測試代碼，如果你想玩。

<html> 
<head> 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" type="text/javascript" charset="utf-8"></script> 
    <script type="text/javascript" charset="utf-8"> 
    $(function() { 
    $('#scroller').scroll(function() { 
     $('#notification').css('display','block').fadeOut(); 
     return false; 
    }) 
    }) 
    </script> 
</head> 
<body style="height: 2000px"> 
    <div id="scroller" style="width: 500px; height: 500px; overflow: scroll; margin: 50px"> 
    <div style="width: 1000px; height: 1000px; background: #ddd"></div> 
    </div> 
    <div id="notification" style="display:none">Bang</div> 
</body> 
</html>

來源

2010-07-28 lawrence

火狐4個實現了該行爲，在默認情況下！歡呼！ – lawrence 2011-06-15 23:53:49

這個js會做，基本上只是把屍體溢出隱藏當鼠標懸停在div＃滾動然後將其設置回正常，當你的鼠標了。

$("#scroller").hover(
    function() { 
     $('body').css('overflow','hidden'); 
    }, 
    function() { 
     $('body').css('overflow','auto'); 
    } 
);

測試在Safari，Firefox和IE8

來源

2010-07-28 21:36:50 Steve

太棒了！謝謝。 – lawrence 2010-07-29 15:36:58

我希望我們可以讓互聯網上的每個人都實現這一點。 – lawrence 2011-03-25 21:03:34

僅滾動頁內元素，而不是整個頁面

回答

相關問題