首頁 >web前端 >js教程 >利用jquery禁止外層滾動條的滾動

利用jquery禁止外層滾動條的滾動

高洛峰
高洛峰原創
2017-01-11 10:05:131732瀏覽

前言

通常情況下,當內部滾動條滾動到兩端時,再接著滾動時外層的滾動條就會跟著滾動;可是有時我們希望用戶只能滾動當前區域,而不觸發外層(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滚动条的高度
 $(&#39;#main&#39;).hover(function(){
 scrollTop = $(window).scrollTop();
 }, function(){
 scrollTop = -1;
 });
 
 // 鼠标进入到区域后,则强制window滚动条的高度
 $(window).scroll(function(){
 scrollTop!==-1 && $(this).scrollTop(scrollTop);
 })
})

從上面的程式碼可以看到,我並沒有阻止window捲軸的事件,而是用戶每次滾動時,都會重新進行賦值。

總結

以上就是這篇文章的全部內容了,希望本文的內容對大家的學習或工作能帶來一定的幫助,當然,或許還有更好的方法,歡迎大家提供,謝謝!

更多利用jquery禁止外層滾動條的滾動相關文章請關注PHP中文網!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn