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

更新時間：2017年01月05日 14:15:22 作者：wenzi

這篇文章主要給大家介紹了利用jquery如何禁止外層滾動條的滾動,文中給出了詳細的示例代碼，相信對大家的理解和學習具有一定的參考借鑒價值，有需要的朋友可以參考借鑒，下面來一起看看吧。

前言

通常情況下，當內(nèi)部滾動條滾動到兩端時，再接著滾動時外層的滾動條就會跟著滾動；可是有時我們希望用戶只能滾動當前區(qū)域，而不觸發(fā)外層（window）的滾動條，離開當前區(qū)域后，才能滾動外層的滾動條。因為用戶可能一不小心滾動的幅度過大了，導(dǎo)致當前區(qū)域離開可視區(qū)域。

在jquery中，滾動事件是scroll，而這個事件是不能阻止冒泡和阻止默認事件的。假如我們設(shè)定要禁止window的滾動條，我采取的策略是：當鼠標進入到當前區(qū)域后，則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; // 鼠標進入到區(qū)域后，則存儲當前window滾動條的高度
 $('#main').hover(function(){
 scrollTop = $(window).scrollTop();
 }, function(){
 scrollTop = -1;
 });

 // 鼠標進入到區(qū)域后，則強制window滾動條的高度
 $(window).scroll(function(){
 scrollTop!==-1 && $(this).scrollTop(scrollTop);
 })
})

從上面的代碼可以看到，我并沒有阻止window滾動條的事件，而是用戶每次滾動時，都會重新進行賦值。

總結(jié)

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

您可能感興趣的文章:

相關(guān)文章

jQuery is()函數(shù)用法3例
這篇文章主要介紹了jQuery is()函數(shù)用法3例,jQuery的is()函數(shù)其實是非常有用的，能不能用好直接決定你的代碼是否高效,需要的朋友可以參考下
2014-05-05
jQuery常見面試題之DOM操作詳析
關(guān)于jQuery的DOM操作面試問題其實有很多，下面這篇文章主要給大家介紹了jQuery常見面試題之DOM操作的相關(guān)資料，文中介紹的非常詳細，對大家具有一定的參考學習價值，需要的朋友們下面來一起看看吧。
2017-07-07
jquery.uploadifive插件怎么解決上傳限制圖片或文件大小問題
jQuery.uploadifive插件可以很好的解決上傳限制圖片或文件大小問題,具體實例代碼大家參考下本文
2017-05-05
JQuery datepicker 用法詳解
這篇文章主要介紹了JQuery datepicker 用法詳解的相關(guān)資料,需要的朋友可以參考下
2015-12-12
Jquery+Ajax+PHP+MySQL實現(xiàn)分類列表管理(下)
本文將采用Jquery+Ajax+PHP+MySQL來實現(xiàn)一個客戶分類列表的管理，如何利用Ajax和Json技術(shù)讓用戶操作起來覺得更輕松，感興趣的小伙伴們可以參考一下
2015-10-10
兩種方法基于jQuery實現(xiàn)IE瀏覽器兼容placeholder效果
這篇文章主要介紹了兩種方法基于jQuery實現(xiàn)IE瀏覽器兼容placeholder效果,需要的朋友可以參考下
2014-10-10
jquery模擬alert的彈窗插件
這篇文章主要介紹了jquery模擬alert的彈窗插件的相關(guān)資料,需要的朋友可以參考下
2015-07-07
詳解jQuery中的getAll()和cleanData()
這篇文章主要介紹了jQuery之getAll()和cleanData()函數(shù)的實例代碼解析，非常不錯，具有一定的參考借鑒價值，需要的朋友參考下吧
2019-04-04
jquery UI Datepicker時間控件的使用方法（加強版）
這篇文章繼續(xù)介紹了jquery UI Datepicker時間控件的使用方法，主要關(guān)于Datepicker插件的介紹和使用，并分享了第一個日歷插件的使用實例，需要的朋友可以參考下
2015-11-11
web前端開發(fā)JQuery常用實例代碼片段(50個)
本文給大家展示50個jquery代碼片段，這些代碼能夠給你的javascript項目提供幫助，需要的朋友快來學習一下吧
2015-08-08