快捷導(dǎo)航

利用jquery禁止外層滾動(dòng)條的滾動(dòng)

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

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

前言

通常情況下，當(dāng)內(nèi)部滾動(dòng)條滾動(dòng)到兩端時(shí)，再接著滾動(dòng)時(shí)外層的滾動(dòng)條就會跟著滾動(dòng)；可是有時(shí)我們希望用戶只能滾動(dòng)當(dāng)前區(qū)域，而不觸發(fā)外層（window）的滾動(dòng)條，離開當(dāng)前區(qū)域后，才能滾動(dòng)外層的滾動(dòng)條。因?yàn)橛脩艨赡芤徊恍⌒臐L動(dòng)的幅度過大了，導(dǎo)致當(dāng)前區(qū)域離開可視區(qū)域。

在jquery中，滾動(dòng)事件是scroll，而這個(gè)事件是不能阻止冒泡和阻止默認(rèn)事件的。假如我們設(shè)定要禁止window的滾動(dòng)條，我采取的策略是：當(dāng)鼠標(biāo)進(jìn)入到當(dāng)前區(qū)域后，則window的滾動(dòng)條的高度始終是鼠標(biāo)進(jìn)入前的高度

如下的代碼：

<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; // 鼠標(biāo)進(jìn)入到區(qū)域后，則存儲當(dāng)前window滾動(dòng)條的高度
 $('#main').hover(function(){
 scrollTop = $(window).scrollTop();
 }, function(){
 scrollTop = -1;
 });

 // 鼠標(biāo)進(jìn)入到區(qū)域后，則強(qiáng)制window滾動(dòng)條的高度
 $(window).scroll(function(){
 scrollTop!==-1 && $(this).scrollTop(scrollTop);
 })
})

從上面的代碼可以看到，我并沒有阻止window滾動(dòng)條的事件，而是用戶每次滾動(dòng)時(shí)，都會重新進(jìn)行賦值。

總結(jié)

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

您可能感興趣的文章: