DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> jQuery入門知識 >> JQuery特效代碼 >> jquery scroll()區分橫向縱向滾動條的方法
jquery scroll()區分橫向縱向滾動條的方法
編輯:JQuery特效代碼     

jquery在scroll()事件裡面,我想判斷當前滾動條橫向還縱向;
我開始用全局變量記錄scrollTop的值來判斷的,如果前後值沒有變就是橫向滾動了,
但是頁面裡有多個滾動條,就要多個全局變量來控制,該怎麼判斷呢?
scroll jquery 區分橫向縱向滾動條

解決方法:
each一次設置選擇器選中對象的scrollLeft/scrollTop就行了,然後綁定scroll事件,觸發的時候獲取scrollLeft/scrollTop和初始化的scrollLeft/scrollTop對比判斷是橫向還是縱向,同時更新對象存儲的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('橫向滾動');
    if(st!=d.st)alert('縱向滾動');
    $(this).data('slt',{sl:sl,st:st});///
})
</script>

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved