利用jquery禁止外層滾動條的滾動
- 高洛峰原創
- 2017-01-11 10:05:131713瀏覽
前言
通常情況下，當內部滾動條滾動到兩端時，再接著滾動時外層的滾動條就會跟著滾動；可是有時我們希望用戶只能滾動當前區域，而不觸發外層（window ）的滾動條，離開目前區域後，才能滾動外層的滾動條。因為使用者可能一不小心滾動的幅度太大了，導致目前區域離開可視區域。
在jquery中，滾動事件是scroll，而這個事件是無法阻止冒泡和阻止預設事件的。假如我們設定要禁止window的滾動條，我採取的策略是：當滑鼠進入到當前區域後，則window的滾動條的高度始終是滑鼠進入前的高度
如下的代碼：
<style type="text/css">
.main{
overflow: auto;
width: 400px;
height: 400px;
border: 1px solid #aaa;
}
.main p{
height: 800px;
}
</style>
<body>
<div id="main" class="main">
<p></p>
</div>
<p style="height:1000px;"></p>
</body>
$(function () {
var scrollTop = -1; // 鼠标进入到区域后，则存储当前window滚动条的高度
$('#main').hover(function(){
scrollTop = $(window).scrollTop();
}, function(){
scrollTop = -1;
});
// 鼠标进入到区域后，则强制window滚动条的高度
$(window).scroll(function(){
scrollTop!==-1 && $(this).scrollTop(scrollTop);
})
})從上面的程式碼可以看到，我並沒有阻止window捲軸的事件，而是用戶每次滾動時，都會重新進行賦值。
總結
以上就是這篇文章的全部內容了，希望本文的內容對大家的學習或工作能帶來一定的幫助，當然，或許還有更好的方法，歡迎大家提供，謝謝！
更多利用jquery禁止外層滾動條的滾動相關文章請關注PHP中文網！
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn