jQuery 8 關於Jquery 的scroll事件（轉載）

jQuery 8 關於Jquery 的scroll事件（轉載）

 

寫法：

$(window).scroll(function () {})（推薦）或 $(document).scroll(function () {})

今天做一個隨屏幕滾動的導航條時，發現一個問題：

火狐、谷歌、ie9正常，ie8、7、6頁面滾動時，導航條沒有反應。

代碼如下：

　　$(document).bind("scroll",function(){ //…… });

後來懷疑綁定對象出了問題，不應該綁定document。改成“body”，還是不行。再改成window，測試成功。

代碼如下：

　　$(window).bind("scroll",function(){ //…… });

查找api後，發現一句話：

　　當用戶滾動元素中到一個不同的地方時，scroll事件將發送到這個元素。它適用於window對象，但也可滾動框架與CSS overflow屬性設置爲scroll的元素

 

 

使用：

jQuery 的scroll事件實現監控滾動條分頁簡單示例,使用ajax加載,同時介紹了(document).height()與$(window).height()的區別,需要的朋友可以參考

1 scrollTop()和scrollLeft()
$(window).scrollTop() 獲取垂直滾動的距離，即當前滾動的地方的窗口頂端到整個頁面頂端的距離
$(window).scrollLeft() 這是獲取水平滾動條的距離
1要獲取頂端 只需要獲取到scrollTop()==0的時候 就是頂端了
2要獲取底端 只要獲取scrollTop()>=$(document).height()-$(window).height()
就可以知道已經滾動到底端了

 

2 (window).height()和(document).height()的區別
jQuery(window).height()代表了當前可見區域的大小，而jQuery(document).height()則代表了整個文檔的高度。當瀏覽器窗口大小改變時(如最大化或拉大窗口後) jQuery(window).height()
隨之改變，但是jQuery(document).height()是不變的。

範例如下:

$(document).ready(function () { 
  $(window).scroll(function () {
    //$(window).scrollTop()這個方法是當前滾動條滾動的距離
    //$(window).height()獲取當前窗體的高度
    //$(document).height()獲取當前文檔的高度
    var bot = 50; 
    //bot是底部距離的高度
    if ((bot + $(window).scrollTop()) >= ($(document).height() - $(window).height())) {
      //當底部基本距離+滾動的高度〉=文檔的高度-窗體的高度時；
      //我們需要去異步加載數據了
      $.getJSON("url", { page: "2" }, function (str) { alert(str); });
    }
  });
});