jQuery scroll事件實作監控捲軸分頁範例_jquery

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

複製程式碼 程式碼如下:

$(document).ready(>

$(document).ready(function () { /function () { /function () {/function () {function /本人習慣這樣寫了
    $(window).scroll(function () {
        //$(window).scrollTop()這個方法是目前滾動條 ).height()取得目前窗體的高度
        //$(document).height()取得目前文件的高度
        var bot (bot $(window).scrollTop()) >= ($(document).height() - $(window).height())) {
           //當底部基本距離滾動的高度〉=文檔的高度-窗體的高度時；
            //我們在非同步上載入資料了
            $.getJSON("url", {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());
})