jQuery 偵測卷軸位置

簡單的寫一下偵測scroll位置及scroll到指定位置的方法。

view plaincopy to clipboardprint

1. <div class="outside">  
2.     <div class="inside">  
3.         here is content.<br/>  
4.     </div>  
5. </div>  
6. <div class="scroll_value">Scroll Left: <span class="sc_left">0</span> <br/>Scroll Top:    
7. <span class="sc_top">0</span>  
8. </div>  

簡單的準備html，讓裡面的長寬比外面的大，就會產生卷軸了，我再放兩個位置去顯示數值。

偵測卷軸橫向的位置用 .scrollLeft()，括號內沒值回傳位置，有值的話會到指定的位置，縱向的話則使用 .scrollTop()

view plaincopy to clipboardprint

1. $(".outside").scroll(function(){   
2.         $scrollVer=$(this).scrollLeft();   
3.         $(".sc_left").text($scrollVer);   
4.         $scrollHor=$(this).scrollTop();   
5.         $(".sc_top").text($scrollHor);   
6.     });  

Demo

反應：