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

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

10年积累的成都网站设计、成都做网站经验,可以快速应对客户对网站的新想法和需求。提供各种问题对应的解决方案。让选择我们的客户得到更好、更有力的网络服务。我虽然不认识你,你也不认识我。但先网站设计制作后付款的网站建设流程,更有黑山免费网站建设让你可以放心的选择与我们合作。

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

  • $(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.                 if (Math.ceil(wh+c)>=h){
  6.                     alert("我已经到底部啦");
  7.                 }
  8.             }) 

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

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

在这里读者需要注意,判断条件中,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.     $.fn.inScroll = function (backcall,count) {
  17.         var $this=this;
  18.         $(window).scroll(function(){
  19.         //获得这个元素到文档顶部的距离
  20.         var awayDocTop=$this.offset().top;
  21.         //获得滚动条的top
  22.         var sTop=$(document).scrollTop();
  23.         //获得可视化窗口的高度
  24.         var wh=$(window).height();
  25.         if(Math.ceil(wh+sTop)>=awayDocTop){
  26.             if(count>0){
  27.                 backcall();
  28.                 count--;
  29.             }
  30.         };
  31.     });
  32.     };
  33. })(jQuery); 

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

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

网站题目:如何判断网页是否已经滚动到浏览器底部了
分享URL:http://www.shufengxianlan.com/qtweb/news27/53377.html

网站建设、网络推广公司-创新互联,是专注品牌与效果的网站制作,网络营销seo公司;服务项目有等

广告

声明:本网站发布的内容(图片、视频和文字)以用户投稿、用户转载内容为主,如果涉及侵权请尽快告知,我们将会在第一时间删除。文章观点不代表本网站立场,如需处理请联系客服。电话:028-86922220;邮箱:631063699@qq.com。内容未经允许不得转载,或转载时需注明来源: 创新互联