jquery scroll()區(qū)分橫向縱向滾動(dòng)條的方法
jquery在scroll()事件里面，我想判斷當(dāng)前滾動(dòng)條橫向還縱向；
我開始用全局變量記錄scrollTop的值來(lái)判斷的，如果前后值沒有變就是橫向滾動(dòng)了，
但是頁(yè)面里有多個(gè)滾動(dòng)條，就要多個(gè)全局變量來(lái)控制，該怎么判斷呢？
scroll jquery 區(qū)分橫向縱向滾動(dòng)條
解決方法：
each一次設(shè)置選擇器選中對(duì)象的scrollLeft/scrollTop就行了，然后綁定scroll事件，觸發(fā)的時(shí)候獲取scrollLeft/scrollTop和初始化的scrollLeft/scrollTop對(duì)比判斷是橫向還是縱向，同時(shí)更新對(duì)象存儲(chǔ)的scrollLeft/scrollTop
<style>
.c{height:120px;width:120px;overflow:auto;border:solid 1px black;margin-bottom:5px;}
</style>
<div class="c">111111111111111111<br>1111111111111111111<br>1111111111111111111<br>1111111111111111111<br>1111111111111111111<br>1111111111111111111<br>1111111111111111111</div>
<div class="c">111111111111111111<br>1111111111111111111<br>1111111111111111111<br>1111111111111111111<br>1111111111111111111<br>1111111111111111111<br>1111111111111111111</div>
<div class="c">111111111111111111<br>1111111111111111111<br>1111111111111111111<br>1111111111111111111<br>1111111111111111111<br>1111111111111111111<br>1111111111111111111</div>
<div class="c">111111111111111111<br>1111111111111111111<br>1111111111111111111<br>1111111111111111111<br>1111111111111111111<br>1111111111111111111<br>1111111111111111111</div>
<script src="/js/jquery.js"></script>
<script>
$('div').each(function(){$(this).data('slt',{sl:this.scrollLeft,st:this.scrollTop});}).scroll(function(){
var sl=this.scrollLeft,st=this.scrollTop,d=$(this).data('slt');
if(sl!=d.sl)alert('橫向滾動(dòng)');
if(st!=d.st)alert('縱向滾動(dòng)');
$(this).data('slt',{sl:sl,st:st});///
})
</script>
- jQuery scroll事件實(shí)現(xiàn)監(jiān)控滾動(dòng)條分頁(yè)示例
- ScrollView滾動(dòng)條顏色的設(shè)置方法
- jquery滾動(dòng)條插件jScrollPane的使用介紹
- android開發(fā)教程之文本框加滾動(dòng)條scrollview
- zepto.js中tap事件阻止冒泡的實(shí)現(xiàn)方法
- 基于zepto.js實(shí)現(xiàn)仿手機(jī)QQ空間的大圖查看組件ImageView.js詳解
- 基于zepto.js簡(jiǎn)單實(shí)現(xiàn)上傳圖片
- jQuery插件zepto.js簡(jiǎn)單實(shí)現(xiàn)tab切換
- 基于touch.js手勢(shì)庫(kù)+zepto.js插件開發(fā)圖片查看器（滑動(dòng)、縮放、雙擊縮放）
- scroll事件實(shí)現(xiàn)監(jiān)控滾動(dòng)條并分頁(yè)顯示(zepto.js)
相關(guān)文章
jQuery源碼分析之jQuery中的循環(huán)技巧詳解
這篇文章主要介紹了jQuery源碼中的循環(huán)技巧,包括各類選擇、判斷、遍歷等等操作,非常實(shí)用的技巧,需要的朋友可以參考下2014-09-09
實(shí)例解析jQuery中proxy()函數(shù)的用法
proxy()主要用于在同樣的上下文語(yǔ)境中指向另一個(gè)對(duì)象,下面我們就以實(shí)例解析jQuery中proxy()函數(shù)的用法,需要的朋友可以參考下2016-05-05
Jquey拖拽控件Draggable使用方法(asp.net環(huán)境)
使用時(shí)首先依次引用Jquery，Jquery-Ui ，Draggable三個(gè)Js。然后在js中編寫相應(yīng)的代碼，相關(guān)代碼說明請(qǐng)看程序中的注釋。2010-09-09
jQuery在html有效在jsp無(wú)效的原因及解決方法
最近用jQuery來(lái)寫下拉框的選項(xiàng)值的左右移動(dòng)，放到j(luò)sp里面就不能用了，經(jīng)過測(cè)試終于找到了解決方法在此與大家分享下2013-08-08
網(wǎng)上常見的應(yīng)用，用jQuery實(shí)現(xiàn)起來(lái)比較簡(jiǎn)單，只有幾行代碼。2011-03-03
jquery 在使用ajax過程中出現(xiàn)調(diào)用失敗的情況，想必大家都有遇到過吧，在本文有個(gè)不錯(cuò)的示例，希望對(duì)大家有所幫助2013-09-09
jquery ztree實(shí)現(xiàn)右鍵收藏功能
最近做項(xiàng)目需要使用ztree做一個(gè)右鍵收藏功能，下面小編給大家分享實(shí)例代碼，需要的朋友參考下吧2017-11-11
在jQuery中使用$而避免跟其它庫(kù)產(chǎn)生沖突的方法
這篇文章主要介紹了在jQuery中使用$而避免跟其它庫(kù)產(chǎn)生沖突的方法,總共羅列了三種,需要的朋友可以參考下2015-08-08
Jquery中.bind()、.live()、.delegate()和.on()之間的區(qū)別詳解
在我們?nèi)粘ｉ_發(fā)中經(jīng)常會(huì)使用到.bind()、.live()、.delegate()和.on()，有些同學(xué)會(huì)對(duì)這四者存在一些疑慮，所以下面這篇文章主要給大家介紹了關(guān)于Jquery中.bind()、.live()、.delegate()和.on()之間區(qū)別的相關(guān)資料，需要的朋友可以參考借鑒。2017-08-08
jQuery擁有可操作HTML元素和屬性的強(qiáng)大方法,下面這篇文章主要給大家介紹了關(guān)于jQuery獲取文本內(nèi)容和原生JS的異同之處,文中通過示例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-05-05