jQuery判斷網頁是否已經捲動到瀏覽器底部詳解-js教程-PHP中文網

jQuery判斷網頁是否已經捲動到瀏覽器底部詳解

小云云

發布： 2018-01-20 10:44:19

原創

1421 人瀏覽過

有些需求中，需要當使用者捲動到瀏覽器底部的時候，再載入新的內容。筆者在這裡介紹如何使用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=$("#p").offset().top;//id为p的元素距离网页顶部的距离
 var c = $(document).scrollTop();//滚动条距离网页顶部的高度
 var wh = $(window).height(); //页面可视化区域高度

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

登入後複製

在這裡讀者需要注意，判斷條件中，wh+c取得是滿足大於等於該數字的最小整數。經過筆者的測試，在IE7、8、9、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);

登入後複製

然後讀者在引入上面的插件檔案後，就可以透過類似下面的程式碼呼叫了。

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

登入後複製