2013年8月13日 星期二

jQuery 偵測卷軸位置

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

  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()
  1. $(".outside").scroll(function(){   
  2.         $scrollVer=$(this).scrollLeft();   
  3.         $(".sc_left").text($scrollVer);   
  4.         $scrollHor=$(this).scrollTop();   
  5.         $(".sc_top").text($scrollHor);   
  6.     });  

Demo

反應:

0 意見:

Related Posts Plugin for WordPress, Blogger...