快捷導(dǎo)航

jQuery scroll事件實(shí)現(xiàn)監(jiān)控滾動(dòng)條分頁(yè)示例

更新時(shí)間：2014年04月04日 08:55:44 作者：

這篇文章主要介紹了jQuery scroll事件實(shí)現(xiàn)監(jiān)控滾動(dòng)條分頁(yè)簡(jiǎn)單示例,使用ajax加載,同時(shí)介紹了(document).height()與$(window).height()的區(qū)別,需要的朋友可以參考下

scroll事件適用于window對(duì)象，但也可滾動(dòng)iframe框架與CSS overflow屬性設(shè)置為scroll的元素。

復(fù)制代碼代碼如下:

$(document).ready(function () { //本人習(xí)慣這樣寫了
    $(window).scroll(function () {
        //$(window).scrollTop()這個(gè)方法是當(dāng)前滾動(dòng)條滾動(dòng)的距離
        //$(window).height()獲取當(dāng)前窗體的高度
        //$(document).height()獲取當(dāng)前文檔的高度
        var bot = 50; //bot是底部距離的高度
        if ((bot + $(window).scrollTop()) >= ($(document).height() - $(window).height())) {
           //當(dāng)?shù)撞炕揪嚯x+滾動(dòng)的高度〉=文檔的高度-窗體的高度時(shí)；
            //我們需要去異步加載數(shù)據(jù)了
            $.getJSON("url", { page: "2" }, function (str) { alert(str); });
        }
    });
});

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

jQuery(window).height()代表了當(dāng)前可見區(qū)域的大小，而jQuery(document).height()則代表了整個(gè)文檔的高度，可視具體情況使用.

注意當(dāng)瀏覽器窗口大小改變時(shí)(如最大化或拉大窗口后) jQuery(window).height() 隨之改變，但是jQuery(document).height()是不變的。

復(fù)制代碼代碼如下:

$(document).scrollTop() 獲取垂直滾動(dòng)的距離即當(dāng)前滾動(dòng)的地方的窗口頂端到整個(gè)頁(yè)面頂端的距離
$(document).scrollLeft() 這是獲取水平滾動(dòng)條的距離

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

要獲取底端只要獲取scrollTop()>=$(document).height()-$(window).height() 就可以知道已經(jīng)滾動(dòng)到底端了

復(fù)制代碼代碼如下:

$(document).height()  //是獲取整個(gè)頁(yè)面的高度
$(window).height()  //是獲取當(dāng)前 也就是你瀏覽器所能看到的頁(yè)面的那部分的高度  這個(gè)大小在你縮放瀏覽器窗口大小時(shí) 會(huì)改變 與document是不一樣的  根據(jù)英文應(yīng)該也能理解吧

自己做個(gè)實(shí)驗(yàn)就知道了

復(fù)制代碼代碼如下:

$(document).scroll(function(){
    $("#lb").text($(document).scrollTop());
})
<span id="lb" style="top:100px;left:100px;position:fixed;"></span><!--一個(gè)固定的span標(biāo)記 滾動(dòng)時(shí)方便查看-->

您可能感興趣的文章: