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 相关文章推荐
QRCode.js:基于JQuery的生成二维码JS库的使用
Jun 23 jQuery
jQuery实现frame之间互通的方法
Jun 26 jQuery
jQuery简单实现对数组去重及排序操作实例
Oct 31 jQuery
基于jQuery实现Ajax验证用户名是否可用实例
Mar 25 jQuery
jQuery实现的两种简单弹窗效果示例
Apr 18 jQuery
jQuery实现为table表格动态添加或删除tr功能示例
Feb 19 jQuery
jquery实现自定义树形表格的方法【自定义树形结构table】
Jul 12 jQuery
jQuery实现图片随机切换、抽奖功能(实例代码)
Oct 23 jQuery
JQuery中DOM节点的操作与访问方法实例分析
Dec 23 jQuery
基于jQuery实现挂号平台首页源码
Jan 06 jQuery
jQuery实现回到顶部效果
Oct 19 jQuery
jquery实现加载更多&quot;转圈圈&quot;效果(示例代码)
Nov 09 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
mysql 字段类型说明
2007/04/27 PHP
Mac OS下配置PHP+MySql环境
2015/02/25 PHP
PHP中in_array的隐式转换的解决方法
2018/03/06 PHP
PHP实现的只保留字符串首尾字符功能示例【隐藏部分字符串】
2019/03/11 PHP
php使用curl模拟多线程实现批处理功能示例
2019/07/25 PHP
js Flash插入函数免激活代码
2009/03/31 Javascript
用JS控制回车事件的代码
2011/02/20 Javascript
JavaScript 判断日期格式是否正确的实现代码
2011/07/04 Javascript
JS检测图片大小的实例
2013/08/21 Javascript
在其他地方你学不到的jQuery小贴士和技巧(欢迎收藏)
2016/01/20 Javascript
深入剖析javascript中的exec与match方法
2016/05/18 Javascript
jQuery限制图片大小的方法
2016/05/25 Javascript
js常用DOM方法详解
2017/02/04 Javascript
浅谈Vuex@2.3.0 中的 state 支持函数申明
2017/11/22 Javascript
详解将微信小程序接口Promise化并使用async函数
2019/08/05 Javascript
JavaScript常用工具函数库汇总
2020/09/17 Javascript
[50:17]Newbee vs Serenity 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/18 DOTA
[01:18]PWL开团时刻DAY10——一拳超人
2020/11/11 DOTA
python获取android设备的GPS信息脚本分享
2015/03/06 Python
Python读取Word(.docx)正文信息的方法
2018/03/15 Python
Python安装图文教程 Pycharm安装教程
2018/03/27 Python
解决Python requests库编码 socks5代理的问题
2018/05/07 Python
django获取from表单multiple-select的value和id的方法
2019/07/19 Python
Python实现SMTP邮件发送
2020/06/16 Python
python-地图可视化组件folium的操作
2020/12/14 Python
浅析Python模块之间的相互引用问题
2021/02/26 Python
详解如何用HTML5 Canvas API控制图片的缩放变换
2016/03/22 HTML / CSS
ALDO英国官网:加拿大女鞋品牌
2018/02/19 全球购物
C#里面如何倒序排列一个数组的元素?
2013/06/21 面试题
会计毕业生自我鉴定
2013/11/04 职场文书
党员群众路线承诺书
2014/05/20 职场文书
教师节活动总结
2014/08/29 职场文书
2014优秀大学生简历自我评价
2014/09/15 职场文书
入党积极分子党小组意见
2015/06/02 职场文书
2015高中教师个人工作总结
2015/07/21 职场文书
游戏开发中如何使用CocosCreator进行音效处理
2021/04/14 Javascript