欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時(shí)間：2017年01月05日 14:15:22   作者：wenzi  
這篇文章主要給大家介紹了利用jquery如何禁止外層滾動條的滾動,文中給出了詳細(xì)的示例代碼，相信對大家的理解和學(xué)習(xí)具有一定的參考借鑒價(jià)值，有需要的朋友可以參考借鑒，下面來一起看看吧。

前言

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

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

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

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

總結(jié)

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

相關(guān)文章

  • jquery 構(gòu)造函數(shù)在表單提交過程中修改數(shù)據(jù)

    jquery 構(gòu)造函數(shù)在表單提交過程中修改數(shù)據(jù)

    這篇文章主要介紹了jquery 構(gòu)造函數(shù)在表單提交過程中修改數(shù)據(jù)的方法，十分簡單實(shí)用，有需要的小伙伴可以參考下。
    2015-05-05
  • Android中資源文件(非代碼部分)的使用概覽

    Android中資源文件(非代碼部分)的使用概覽

    Android中的資源是指非代碼部分，指外部文件，本文詳細(xì)介紹資源使用概覽，需要了解的朋友可以參考下
    2012-12-12
  • 結(jié)合JQ1.9通過js正則判斷各種瀏覽器版本的方法

    結(jié)合JQ1.9通過js正則判斷各種瀏覽器版本的方法

    本篇文章主要是對結(jié)合JQ1.9通過js正則判斷瀏覽器版本的方法進(jìn)行了介紹，需要的朋友可以過來參考下，希望對大家有所幫助
    2013-12-12
  • jquery中JSON的解析方式

    jquery中JSON的解析方式

    用jquery解析JSON數(shù)據(jù)的方法,作為jquery異步請求的傳輸對象，jquery請求后返回的結(jié)果是json對象,這里考慮的都是服務(wù)器返回JSON形式的字符串的形式，對于利用JSONObject等插件封裝的JSON對象，與此亦是大同小異，這里不再做說明
    2015-03-03
  • 基于jQuery的日期選擇控件

    基于jQuery的日期選擇控件

    終于把jQuery拼寫正確了哈，哈哈javascript也是區(qū)分大小寫的,所以確實(shí)不能寫錯(cuò)，今天我來和大家分享的是日期選擇控件的實(shí)現(xiàn)，功能也許不夠強(qiáng)大，但是能夠滿足需求。
    2009-10-10
  • Juery解決tablesorter中文排序和字符范圍的方法

    Juery解決tablesorter中文排序和字符范圍的方法

    這篇文章主要介紹了Juery解決tablesorter中文排序和字符范圍的方法,實(shí)例分析了jQuery針對tablesorter中文排序和字符范圍的解決方法,需要的朋友可以參考下
    2015-05-05
  • 基于jquery和svg實(shí)現(xiàn)超炫酷的動畫特效

    基于jquery和svg實(shí)現(xiàn)超炫酷的動畫特效

    這篇文章主要介紹了基于jquery和svg實(shí)現(xiàn)超炫酷的動畫特效,想學(xué)習(xí)SVG的童鞋們可以來參考下。
    2014-12-12
  • jquery 動態(tài)合并單元格的實(shí)現(xiàn)方法

    jquery 動態(tài)合并單元格的實(shí)現(xiàn)方法

    下面小編就為大家?guī)硪黄猨query 動態(tài)合并單元格的實(shí)現(xiàn)方法。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
    2016-08-08
  • jQuery實(shí)現(xiàn)的簡單分頁示例

    jQuery實(shí)現(xiàn)的簡單分頁示例

    這篇文章主要介紹了jQuery實(shí)現(xiàn)的簡單分頁,涉及jQuery數(shù)學(xué)運(yùn)算與頁面元素操作技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下
    2016-06-06
  • jquery實(shí)現(xiàn)網(wǎng)頁的頁面平滑滾動效果代碼

    jquery實(shí)現(xiàn)網(wǎng)頁的頁面平滑滾動效果代碼

    這篇文章主要介紹了jquery實(shí)現(xiàn)網(wǎng)頁的頁面平滑滾動效果代碼,涉及jQuery結(jié)合鼠標(biāo)事件操作頁面元素滾動效果的實(shí)現(xiàn)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下
    2015-11-11

最新評論