如何判断网页是否已经滚动到浏览器底部了-阿里云开发者社区

开发者社区> 大数据> 正文

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

简介:

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

有些需求中,需要当用户滚动到浏览器底部的时候,再加载新的内容。笔者在这里介绍如何使用Jquery判断用户是否已经浏览到网页的底部了。

在了解下面的知识点之前,笔者这里先介绍几个概念。

  • $(window).height(); //用于获取浏览器显示区域的高度
  • $(window).width(); //用于获取浏览器显示区域的宽度
  • $(document.body).height(); //获取页面文档的高度
  • $(document.body).width(); //获取页面文档的宽度
  • $(document).scrollTop(); //获取垂直滚动条到顶部的垂直距离
  • $(document).scrollLeft(); //获取水平滚动条到左边的水平距离

通过上面的知识点,可以知道:浏览器显示区域的高度+垂直滚动条距离顶部距离<=网页的高度。

有了这个结论,那么实现起来就容易了。下面的代码实现了,判断用户是否浏览到了网页的底部。


  1. $(window).scroll(function(){ 
  2.                 var h=$(document.body).height();//网页文档的高度 
  3.                 var c = $(document).scrollTop();//滚动条距离网页顶部的高度 
  4.                 var wh = $(window).height(); //页面可视化区域高度 
  5.  
  6.                 if (Math.ceil(wh+c)>=h){ 
  7.                     alert("我已经到底部啦"); 
  8.                 } 
  9.             })  

如果需要判断用户是否已经浏览到某个元素的话,那么只需要把上面的网页文档高度,换成某一个元素距离网页顶部的距离就可以了。例如:


  1. $(window).scroll(function(){ 
  2.                 var h=$("#div").offset().top;//id为div的元素距离网页顶部的距离 
  3.                 var c = $(document).scrollTop();//滚动条距离网页顶部的高度 
  4.                 var wh = $(window).height(); //页面可视化区域高度 
  5.  
  6.                 if (Math.ceil(wh+c)>=h){ 
  7.                     alert("我已经到底部啦"); 
  8.                 } 
  9.             })  

在这里读者需要注意,判断条件中,wh+c取得是满足大于等于该数字的最小整数。经过笔者的测试,在IE7、8、9、11上都没有问题。

接下来笔者把上面的代码封装为一个插件。


  1. (function ($) { 
  2.         //backcall是回调函数,count表示回调函数被执行的次数,count只有元素在屏幕范围之外的时候才起作用 
  3.     $.fn.inBottom = function (backcall){ 
  4.         //判断当前元素是否在目前屏幕可视化区域之内 
  5.         if(this.offset().top >= $(window).height()){ 
  6.             this.inScroll(backcall,count); 
  7.         }else
  8.             this.inWindow(backcall); 
  9.         } 
  10.     }; 
  11.     //直接加载回调函数 
  12.     $.fn.inWindow = function (backcall){ 
  13.         backcall(); 
  14.  
  15.     }; 
  16.     //滚动监听滑动条,元素滚动到屏幕底部的时候,加载回调函数 
  17.     $.fn.inScroll = function (backcall,count) { 
  18.         var $this=this; 
  19.         $(window).scroll(function(){ 
  20.         //获得这个元素到文档顶部的距离 
  21.         var awayDocTop=$this.offset().top
  22.         //获得滚动条的top 
  23.         var sTop=$(document).scrollTop(); 
  24.         //获得可视化窗口的高度 
  25.         var wh=$(window).height(); 
  26.         if(Math.ceil(wh+sTop)>=awayDocTop){ 
  27.             if(count>0){ 
  28.                 backcall(); 
  29.                 count--; 
  30.             } 
  31.         }; 
  32.     }); 
  33.     }; 
  34. })(jQuery);  

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


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


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

本文作者:我的光明

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

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

分享:
大数据
使用钉钉扫一扫加入圈子
+ 订阅

大数据计算实践乐园,近距离学习前沿技术

其他文章