【Jquery】如何判斷網頁是否已經滾動到瀏覽器底部了

有些需求中，須要當用戶滾動到瀏覽器底部的時候，再加載新的內容。筆者在這裏介紹如何使用Jquery判斷用戶是否已經瀏覽到網頁的底部了。

在瞭解下面的知識點以前，筆者這裏先介紹幾個概念。

$(window).height(); //用於獲取瀏覽器顯示區域的高度

$(window).width(); //用於獲取瀏覽器顯示區域的寬度

$(document.body).height(); //獲取頁面文檔的高度

$(document.body).width(); //獲取頁面文檔的寬度

$(document).scrollTop(); //獲取垂直滾動條到頂部的垂直距離

$(document).scrollLeft(); //獲取水平滾動條到左邊的水平距離

經過上面的知識點，能夠知道：瀏覽器顯示區域的高度+垂直滾動條距離頂部距離<=網頁的高度。

有了這個結論，那麼實現起來就容易了。下面的代碼實現了，判斷用戶是否瀏覽到了網頁的底部。

$(window).scroll(function(){
				var h=$(document.body).height();//網頁文檔的高度
				var c = $(document).scrollTop();//滾動條距離網頁頂部的高度
				var wh = $(window).height(); //頁面可視化區域高度

				if (Math.ceil(wh+c)>=h){
				    alert("我已經到底部啦");
				}
			})

若是須要判斷用戶是否已經瀏覽到某個元素的話，那麼只須要把上面的網頁文檔高度，換成某一個元素距離網頁頂部的距離就能夠了。例如：

$(window).scroll(function(){
				var h=$("#div").offset().top;//id爲div的元素距離網頁頂部的距離
				var c = $(document).scrollTop();//滾動條距離網頁頂部的高度
				var wh = $(window).height(); //頁面可視化區域高度

				if (Math.ceil(wh+c)>=h){
				    alert("我已經到底部啦");
				}
			})

在這裏讀者須要注意，判斷條件中，wh+c取得是知足大於等於該數字的最小整數。通過筆者的測試，在IE七、八、九、11上都沒有問題。

接下來筆者把上面的代碼封裝爲一個插件。

(function ($) {
        //backcall是回調函數，count表示回調函數被執行的次數，count只有在元素經過滾動條滑出的時候才起做用
	$.fn.inBottom = function (backcall){
		//判斷當前元素是否在目前屏幕可視化區域以內
		if(this.offset().top >= $(window).height()){
			this.inScroll(backcall,count);
		}else{
			this.inWindow(backcall);
		}
	};
	//直接加載回調函數
	$.fn.inWindow = function (backcall){
		backcall();

	};
	//滾動監聽滑動條，元素滾動到屏幕底部的時候，加載回調函數
    $.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);

而後讀者在引入上面的插件文件後，就能夠經過相似於下面的代碼調用了。

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