abstrakt：前言通常情況下，當(dāng)內(nèi)部滾動(dòng)條滾動(dòng)到兩端時(shí)，再接著滾動(dòng)時(shí)外層的滾動(dòng)條就會(huì)跟著滾動(dòng)；可是有時(shí)我們希望用戶(hù)只能滾動(dòng)當(dāng)前區(qū)域，而不觸發(fā)外層（window）的滾動(dòng)條，離開(kāi)當(dāng)前區(qū)域后，才能滾動(dòng)外層的滾動(dòng)條。因?yàn)橛脩?hù)可能一不小心滾動(dòng)的幅度過(guò)大了，導(dǎo)致當(dāng)前區(qū)域離開(kāi)可視區(qū)域。在jquery中，滾動(dòng)事件是scroll，而這個(gè)事件是不能阻止冒泡和阻止默認(rèn)事件的。假如我們?cè)O(shè)定要禁止window的滾動(dòng)條，我采取的策略是：當(dāng)
前言
通常情況下，當(dāng)內(nèi)部滾動(dòng)條滾動(dòng)到兩端時(shí)，再接著滾動(dòng)時(shí)外層的滾動(dòng)條就會(huì)跟著滾動(dòng)；可是有時(shí)我們希望用戶(hù)只能滾動(dòng)當(dāng)前區(qū)域，而不觸發(fā)外層（window）的滾動(dòng)條，離開(kāi)當(dāng)前區(qū)域后，才能滾動(dòng)外層的滾動(dòng)條。因?yàn)橛脩?hù)可能一不小心滾動(dòng)的幅度過(guò)大了，導(dǎo)致當(dāng)前區(qū)域離開(kāi)可視區(qū)域。
在jquery中，滾動(dòng)事件是scroll，而這個(gè)事件是不能阻止冒泡和阻止默認(rèn)事件的。假如我們?cè)O(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ū)域后，則存儲(chǔ)當(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);
})
})從上面的代碼可以看到，我并沒(méi)有阻止window滾動(dòng)條的事件，而是用戶(hù)每次滾動(dòng)時(shí)，都會(huì)重新進(jìn)行賦值。
更多關(guān)于利用jquery禁止外層滾動(dòng)條的滾動(dòng)請(qǐng)關(guān)注PHP中文網(wǎng)（ipnx.cn）其他文章！