[[207638]]

有些需求中，需要當(dāng)用戶滾動到瀏覽器底部的時(shí)候，再加載新的內(nèi)容。筆者在這里介紹如何使用Jquery判斷用戶是否已經(jīng)瀏覽到網(wǎng)頁的底部了。

在了解下面的知識點(diǎn)之前，筆者這里先介紹幾個(gè)概念。

• $(window).height(); //用于獲取瀏覽器顯示區(qū)域的高度
• $(window).width(); //用于獲取瀏覽器顯示區(qū)域的寬度
• $(document.body).height(); //獲取頁面文檔的高度
• $(document.body).width(); //獲取頁面文檔的寬度
• $(document).scrollTop(); //獲取垂直滾動條到頂部的垂直距離
• $(document).scrollLeft(); //獲取水平滾動條到左邊的水平距離

通過上面的知識點(diǎn)，可以知道：瀏覽器顯示區(qū)域的高度+垂直滾動條距離頂部距離<=網(wǎng)頁的高度。

有了這個(gè)結(jié)論，那么實(shí)現(xiàn)起來就容易了。下面的代碼實(shí)現(xiàn)了，判斷用戶是否瀏覽到了網(wǎng)頁的底部。

$(window).scroll(function(){ 
                var h=$(document.body).height();//網(wǎng)頁文檔的高度 
                var c = $(document).scrollTop();//滾動條距離網(wǎng)頁頂部的高度 
                var wh = $(window).height(); //頁面可視化區(qū)域高度 
 
                if (Math.ceil(wh+c)>=h){ 
                    alert("我已經(jīng)到底部啦"); 
                } 
            })  

如果需要判斷用戶是否已經(jīng)瀏覽到某個(gè)元素的話，那么只需要把上面的網(wǎng)頁文檔高度，換成某一個(gè)元素距離網(wǎng)頁頂部的距離就可以了。例如：

$(window).scroll(function(){ 
                var h=$("#div").offset().top;//id為div的元素距離網(wǎng)頁頂部的距離 
                var c = $(document).scrollTop();//滾動條距離網(wǎng)頁頂部的高度 
                var wh = $(window).height(); //頁面可視化區(qū)域高度 
 
                if (Math.ceil(wh+c)>=h){ 
                    alert("我已經(jīng)到底部啦"); 
                } 
            })  

在這里讀者需要注意，判斷條件中，wh+c取得是滿足大于等于該數(shù)字的最小整數(shù)。經(jīng)過筆者的測試，在IE7、8、9、11上都沒有問題。

接下來筆者把上面的代碼封裝為一個(gè)插件。

(function ($) { 
        //backcall是回調(diào)函數(shù)，count表示回調(diào)函數(shù)被執(zhí)行的次數(shù)，count只有元素在屏幕范圍之外的時(shí)候才起作用 
    $.fn.inBottom = function (backcall){ 
        //判斷當(dāng)前元素是否在目前屏幕可視化區(qū)域之內(nèi) 
        if(this.offset().top >= $(window).height()){ 
            this.inScroll(backcall,count); 
        }else{ 
            this.inWindow(backcall); 
        } 
    }; 
    //直接加載回調(diào)函數(shù) 
    $.fn.inWindow = function (backcall){ 
        backcall(); 
 
    }; 
    //滾動監(jiān)聽滑動條，元素滾動到屏幕底部的時(shí)候，加載回調(diào)函數(shù) 
    $.fn.inScroll = function (backcall,count) { 
        var $this=this; 
        $(window).scroll(function(){ 
        //獲得這個(gè)元素到文檔頂部的距離 
        var awayDocTop=$this.offset().top; 
        //獲得滾動條的top 
        var sTop=$(document).scrollTop(); 
        //獲得可視化窗口的高度 
        var wh=$(window).height(); 
        if(Math.ceil(wh+sTop)>=awayDocTop){ 
            if(count>0){ 
                backcall(); 
                count--; 
            } 
        }; 
    }); 
    }; 
})(jQuery);  

然后讀者在引入上面的插件文件后，就可以通過類似于下面的代碼調(diào)用了。

$("#div").inBottom(function(){ 
    alert("我被回調(diào)了"); 
},1);