欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

jQuery判断网页是否已经滚动到浏览器底部详解

程序员文章站 2022-03-25 10:24:21
...
有些需求中,需要当用户滚动到浏览器底部的时候,再加载新的内容。笔者在这里介绍如何使用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);

相关推荐:

css控制div固定在浏览器底部实例代码

图片始终固定在浏览器底部的实现方法?_html/css_WEB-ITnose

一个在浏览器底部固定浮动的DIV如何实现(只用css)?_html/css_WEB-ITnose

以上就是jQuery判断网页是否已经滚动到浏览器底部详解的详细内容,更多请关注其它相关文章!