利用jquery禁止外層滾動條的滾動
前言
通常情況下,當(dāng)內(nèi)部滾動條滾動到兩端時,再接著滾動時外層的滾動條就會跟著滾動;可是有時我們希望用戶只能滾動當(dāng)前區(qū)域,而不觸發(fā)外層(window)的滾動條,離開當(dāng)前區(qū)域后,才能滾動外層的滾動條。因?yàn)橛脩艨赡芤徊恍⌒臐L動的幅度過大了,導(dǎo)致當(dāng)前區(qū)域離開可視區(qū)域。
在jquery中,滾動事件是scroll,而這個事件是不能阻止冒泡和阻止默認(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滾動條的事件,而是用戶每次滾動時,都會重新進(jìn)行賦值。
總結(jié)
以上就是這篇文章的全部內(nèi)容了,希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作能帶來一定的幫助,當(dāng)然,或許還有更好的方法,歡迎大家提供,謝謝!
- jquery滾動條插件slimScroll使用方法
- js/jquery控制頁面動態(tài)加載數(shù)據(jù) 滑動滾動條自動加載事件的方法
- jQuery實(shí)現(xiàn)滾動條滾動到子元素位置(方便定位)
- jQuery實(shí)現(xiàn)立體式數(shù)字滾動條增加效果
- jQuery中Nicescroll滾動條插件的用法
- jQuery判斷是否存在滾動條的簡單方法
- jQuery彈出層后禁用底部滾動條(移動端關(guān)閉回到原位置)
- jQuery實(shí)現(xiàn)將div中滾動條滾動到指定位置的方法
- vue中如何引入jQuery和Bootstrap
- bootstrap jquery dataTable 異步ajax刷新表格數(shù)據(jù)的實(shí)現(xiàn)方法
- Jquery與Bootstrap實(shí)現(xiàn)后臺管理頁面增刪改查功能示例
- 利用jquery和BootStrap實(shí)現(xiàn)動態(tài)滾動條效果
相關(guān)文章
jquery 構(gòu)造函數(shù)在表單提交過程中修改數(shù)據(jù)
這篇文章主要介紹了jquery 構(gòu)造函數(shù)在表單提交過程中修改數(shù)據(jù)的方法,十分簡單實(shí)用,有需要的小伙伴可以參考下。2015-05-05結(jié)合JQ1.9通過js正則判斷各種瀏覽器版本的方法
本篇文章主要是對結(jié)合JQ1.9通過js正則判斷瀏覽器版本的方法進(jìn)行了介紹,需要的朋友可以過來參考下,希望對大家有所幫助2013-12-12Juery解決tablesorter中文排序和字符范圍的方法
這篇文章主要介紹了Juery解決tablesorter中文排序和字符范圍的方法,實(shí)例分析了jQuery針對tablesorter中文排序和字符范圍的解決方法,需要的朋友可以參考下2015-05-05基于jquery和svg實(shí)現(xiàn)超炫酷的動畫特效
這篇文章主要介紹了基于jquery和svg實(shí)現(xiàn)超炫酷的動畫特效,想學(xué)習(xí)SVG的童鞋們可以來參考下。2014-12-12jquery 動態(tài)合并單元格的實(shí)現(xiàn)方法
下面小編就為大家?guī)硪黄猨query 動態(tài)合并單元格的實(shí)現(xiàn)方法。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2016-08-08jquery實(shí)現(xiàn)網(wǎng)頁的頁面平滑滾動效果代碼
這篇文章主要介紹了jquery實(shí)現(xiàn)網(wǎng)頁的頁面平滑滾動效果代碼,涉及jQuery結(jié)合鼠標(biāo)事件操作頁面元素滾動效果的實(shí)現(xiàn)技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-11-11