方式1：
頁面滾動到了底部
因為第一種比較簡單，so我用的是第一種萄焦，如果用的地方比較多請看方式4
$(document).height() == parseInt($(document).scrollTop() + $(window).height() )
有些需求中驾诈，需要當(dāng)用戶滾動到瀏覽器底部的時候，再加載新的內(nèi)容哑蔫。筆者在這里介紹如何使用Jquery判斷用戶是否已經(jīng)瀏覽到網(wǎng)頁的底部了钉寝。
在了解下面的知識點之前，筆者這里先介紹幾個概念闸迷。
$(window).height(); //用于獲取瀏覽器顯示區(qū)域的高度
$(window).width(); //用于獲取瀏覽器顯示區(qū)域的寬度
$(document.body).height(); //獲取頁面文檔的高度
$(document.body).width(); //獲取頁面文檔的寬度
$(document).scrollTop(); //獲取垂直滾動條到頂部的垂直距離
$(document).scrollLeft(); //獲取水平滾動條到左邊的水平距離
通過上面的知識點嵌纲，可以知道：瀏覽器顯示區(qū)域的高度+垂直滾動條距離頂部距離<=網(wǎng)頁的高度。
有了這個結(jié)論腥沽，那么實現(xiàn)起來就容易了逮走。下面的代碼實現(xiàn)了，判斷用戶是否瀏覽到了網(wǎng)頁的底部今阳。
方式2：
$(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)瀏覽到某個元素的話师溅，那么只需要把上面的網(wǎng)頁文檔高度茅信，換成某一個元素距離網(wǎng)頁頂部的距離就可以了。例如：
方式3：
$(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上都沒有問題窑多。
接下來筆者把上面的代碼封裝為一個插件。
方式4：封裝
(function ($) {
//backcall是回調(diào)函數(shù)鼻疮，count表示回調(diào)函數(shù)被執(zhí)行的次數(shù)怯伊，count只有在元素通過滾動條滑出的時候才起作用
$.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)聽滑動條，元素滾動到屏幕底部的時候判沟，加載回調(diào)函數(shù)
$.fn.inScroll = function (backcall,count) {
var $this=this;
$(window).scroll(function(){
//獲得這個元素到文檔頂部的距離
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)
