如何判断网页是否已经滚动到浏览器底部了

有些需求中，需要当用户滚动到浏览器底部的时候，再加载新的内容。笔者在这里介绍如何使用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取得是满足大于等于该数字的最小整数。经过笔者的测试，在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);  
  
  

然后读者在引入上面的插件文件后，就可以通过类似于下面的代码调用了。

  
  


   
   
$("#div").inBottom(function(){ 

   
   
    alert("我被回调了"); 

   
   
},1);  
  
  

原文发布时间为：2017-10-25

本文作者:我的光明

本文来自云栖社区合作伙伴“51CTO”，了解相关信息可以关注。