有些需求中，需要当用户滚动到浏览器底部的时候，再加载新的内容。笔者在这里介绍如何使用Jquery判断用户是否已经浏览到网页的底部了。
在了解下面的知识点之前，笔者这里先介绍几个概念。
$(window).height(); //用于获取浏览器显示区域的高度
$(window).width(); //用于获取浏览器显示区域的宽度
$(document.body).height(); //获取页面文档的高度
$(document.body).width(); //获取页面文档的宽度
$(document).scrollTop(); //获取垂直滚动条到顶部的垂直距离
$(document).scrollLeft(); //获取水平滚动条到左边的水平距离
通过上面的知识点，可以知道：浏览器显示区域的高度+垂直滚动条距离顶部距离<=网页的高度。
有了这个结论，那么实现起来就容易了。下面的代码实现了，判断用户是否浏览到了网页的底部。
如果需要判断用户是否已经浏览到某个元素的话，那么只需要把上面的网页文档高度，换成某一个元素距离网页顶部的距离就可以了。例如：
在这里读者需要注意，判断条件中，wh+c取得是满足大于等于该数字的最小整数。经过笔者的测试，在IE7、8、9、11上都没有问题。
= $(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);
然后读者在引入上面的插件文件后，就可以通过类似于下面的代码调用了。
总结
以上所述是小编给大家介绍的jQuery判断网页是否已经滚动到浏览器底部的实现方法。编程之家 jb51.cc 收集整理的教程希望能对你有所帮助，如果觉得编程之家不错，可分享给好友！感谢支持。
原文链接：https://www.f2er.com/jquery/35515.html