jQuery判断网页是否已经滚动到浏览器底部的实现方法


Posted in jQuery onOctober 27, 2017

有些需求中,需要当用户滚动到浏览器底部的时候,再加载新的内容。笔者在这里介绍如何使用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);

总结

以上所述是小编给大家介绍的jQuery判断网页是否已经滚动到浏览器底部的实现方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

jQuery 相关文章推荐
HTML5+jQuery实现搜索智能匹配功能
Mar 24 jQuery
简单实现jQuery弹幕效果
May 06 jQuery
jQuery遮罩层实例讲解
May 11 jQuery
jQuery取得元素标签名称小结(附代码)
Aug 16 jQuery
jQuery实现简单的回到顶部totop功能示例
Oct 16 jQuery
jQuery进阶实践之利用最优雅的方式如何写ajax请求
Dec 20 jQuery
基于jquery.page.js实现分页效果
Jan 01 jQuery
jQuery实现判断上传图片类型和大小的方法示例
Apr 11 jQuery
详解jQuery中的easyui
Sep 02 jQuery
jQuery实现的3D版图片轮播示例【滑动轮播】
Jan 18 jQuery
jQuery实现高级检索功能
May 28 jQuery
JQuery插件tablesorter表格排序实现过程解析
May 28 jQuery
JavaScript自执行函数和jQuery扩展方法详解
Oct 27 #jQuery
jquery使用iscorll实现上拉、下拉加载刷新
Oct 26 #jQuery
使用JQuery实现图片轮播效果的实例(推荐)
Oct 24 #jQuery
jquery select插件异步实时搜索实例代码
Oct 20 #jQuery
利用jQuery实现简单的拖曳效果实例代码
Oct 20 #jQuery
jQuery访问浏览器本地存储cookie、localStorage和sessionStorage的基本用法
Oct 20 #jQuery
jQuery实现打开网页自动弹出遮罩层或点击弹出遮罩层功能示例
Oct 19 #jQuery
You might like
PHP数组实例总结与说明
2011/08/23 PHP
PHP curl实现抓取302跳转后页面的示例
2014/07/04 PHP
PHP convert_uudecode()函数讲解
2019/02/14 PHP
php使用curl伪造浏览器访问操作示例
2019/09/30 PHP
Aster vs Newbee BO5 第二场2.19
2021/03/10 DOTA
JScript中使用ADODB.Stream判断文件编码的代码
2008/06/09 Javascript
jquery多浏览器捕捉回车事件代码
2010/06/22 Javascript
将string解析为json的几种方式小结
2010/11/11 Javascript
js防止表单重复提交实现代码
2012/09/05 Javascript
ExtJs纵坐标值重复问题的解决方法
2014/02/27 Javascript
在HTML代码中使用JavaScript代码的例子
2014/10/16 Javascript
javascript 获取浏览器版本
2015/01/21 Javascript
arguments对象验证函数的参数是否合法
2015/06/26 Javascript
纯CSS3代码实现滑动开关效果
2015/08/19 Javascript
JS获取及验证开始结束日期的方法
2016/08/20 Javascript
js代码实现下拉菜单【推荐】
2016/12/15 Javascript
基于jQuery代码实现圆形菜单展开收缩效果
2017/02/13 Javascript
JavaScript结合HTML DOM实现联动菜单
2017/04/05 Javascript
JS+canvas绘制的动态机械表动画效果
2017/09/12 Javascript
解决vue-cli + webpack 新建项目出错的问题
2018/03/20 Javascript
Node.js命令行/批处理中如何更改Linux用户密码浅析
2018/07/22 Javascript
highCharts提示框中显示当前时间的方法
2019/01/18 Javascript
vue-cli3使用 DllPlugin 实现预编译提升构建速度
2019/04/24 Javascript
vue通过过滤器实现数据格式化
2020/07/20 Javascript
解决vue项目,npm run build后,报路径错的问题
2020/08/13 Javascript
[01:05:36]VP vs TNC Supermajor小组赛B组 BO3 第二场 6.2
2018/06/03 DOTA
Python查看微信撤回消息代码
2018/06/07 Python
详解Python利用random生成一个列表内的随机数
2019/08/21 Python
tensorflow转换ckpt为savermodel模型的实现
2020/05/25 Python
行政部主管岗位职责
2013/12/28 职场文书
民政工作个人总结
2015/02/28 职场文书
保护校园环境倡议书
2015/04/28 职场文书
抢劫罪辩护词
2015/05/21 职场文书
LayUI+Shiro实现动态菜单并记住菜单收展的示例
2021/05/06 Javascript
SpringBoot2零基础到精通之数据库专项精讲
2022/03/22 Java/Android
Golang 切片(Slice)实现增删改查
2022/04/22 Golang