jQuery scroll事件實作監控滾動條分頁實例詳解

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

scroll事件適用於window物件，但也可捲動iframe框架與CSS overflow屬性設定為scroll的元素。

程式碼如下:

$(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); });
        }
    });
});

注意：(window).height()和(document).height()的區別

jQuery(window).height ()代表了目前可見區域的大小，而jQuery(document).height()則代表了整個文件的高度，可視具體情況使用.

注意當瀏覽器視窗大小改變時(如最大化或拉大視窗後) jQuery(window).height() 隨之改變，但是jQuery(document).height()是不變的。

#程式碼如下:

$(document).scrollTop() 取得垂直捲動的距離  即目前捲動的地方的視窗頂端到整個頁面頂端的距離
$( document).scrollLeft() 這是取得水平捲軸的距離

要取得頂端只需要取得到scrollTop()==0的時候  就是頂端了

要取得底端只要取得scrollTop()>=$(document).height()-$(window).height()  就可以知道已經捲動到底端了

程式碼如下:

##$ (document).height()  //是取得整個頁面的高度

$(window).height()  //是取得目前也就是你瀏覽器所能看到的頁面的那部分的高度  這個大小在你縮放瀏覽器視窗大小時會改變與document是不一樣的  根據英文應該也能理解吧

#自己做個實驗就知道了

程式碼如下:

$(document).scroll(function(){

    $("#lb").text($(document).scrollTop());
})
dbf13e31b7987f342d2de9a442c40b2f54bdf357c58b8a65c66d7c19c8e4d1140f59930dfce26afb92e7ef44e8254c67

以上是jQuery scroll事件實作監控滾動條分頁實例詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！