[趣味代码] 如何判断网页是否已经滚动到浏览器底部
作者:CC下载站 日期:2018-10-10 01:57:13 浏览:1850 分类:站长帮
有些需求中,需要当用户滚动到浏览器底部的时候,再加载新的内容。笔者在这里介绍如何使用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);
猜你还喜欢
- 05-11 [游戏攻略] DNF70级战斗法师职业加点配装详细攻略
- 12-06 [浏览器] 360极速浏览器X64 v22.1.1056.0 绿色便携版
- 10-11 [玩软件] edge浏览器无法同步问题
- 09-15 [玩转MAC] 苹果电脑MAC浏览器全屏快捷键是什么
- 09-15 [玩转MAC] MAC Safari浏览器使用英语朗读功能解决不懂读音造成的困扰
- 09-15 [玩转MAC] MAC用户该如何清理Safari浏览器的Cookie
- 09-15 [玩转MAC] MAC系统Safari浏览器没有自动代理搜索如何让其拥有
- 09-15 [玩转MAC] MAC怎么设置默认浏览器有哪些方法
- 09-15 [玩转MAC] 苹果Mac设置默认网页浏览器方法图解
- 09-15 [玩转MAC] Safari下载的文件在哪 苹果电脑浏览器safari下载的文件保存位置介绍
- 09-11 [系统技巧] 统信UOS怎么设置不让浏览器上网? UOS禁止浏览器访问网络的技巧
- 06-10 [其他分享] 这款浏览器插件,这么好用?
取消回复欢迎 你 发表评论:
- 精品推荐!
-
- 最新文章
- 热门文章
- 热评文章
[跨境电商] TikTok中视频课程30天线上陪跑
[电影] [摩登笑探 冇面俾].1995.HDTV1080i.国语中字
[电影] 非常偵探/The Private Eye Blues 1994
[摄影] 让手机秒变单反的手机拍摄好物
[电影](香港怀旧老电影)《情义我心知》1989.VCDRip.MKV[粤语双字]
[电影] [五个堕落的男女][HD-MKV/1.88G][国语中字][1080P]
[游戏娱乐] 《赤痕:夜之仪式》v1.50中文版
[游戏娱乐] 《极乐迪斯科》v20230509导演剪辑版
[电影] 2023年美国剧情片《包围》BD中英双字
[课程] 张景明教授《一病一讲·100集》
[资料] [大学期末救急课] 猴博士+高斯课堂+斐多课堂,全集视频合集
[云资源] 价值2万元的老男孩Python教程
[书库] 史上最全摄影书推荐(附700本PDF版打包下载)
[云资源] 花了一千多元买的私人健身教程
[下载工具] Internet Download Manager 6.42.7 (IDM)
[影视] 灌篮高手 WEB-DL版下载/Slam Dunk/スラムダンク/灌篮高手:THE FIRST/灌篮高手电影版 2022 The First Slam Dunk 61.35G
[资料] 3000 套电影电视剧 LOGO 宣传片常用音效合集包
[安卓软件] 酷我音乐APP_v10.7.6.4 去广告破解豪华VIP版
[即时通讯] 微信PC版WeChat 3.9.9.43 多开防撤回绿色版
[安卓软件] Solid Explorer文件管理器APP 2.8.38 破解版
[云资源] 价值2万元的老男孩Python教程
[影视] 灌篮高手 WEB-DL版下载/Slam Dunk/スラムダンク/灌篮高手:THE FIRST/灌篮高手电影版 2022 The First Slam Dunk 61.35G
[云资源] 花了一千多元买的私人健身教程
[书库] 史上最全摄影书推荐(附700本PDF版打包下载)
[动画] 北斗神拳(1984) [两季合集] [MKV]
[资料] 抗战阵亡将士资料+续编
[电视剧] 三体 (2024) 全8集 网飞版本 中文字幕 合集
[纪录片] 河西走廊【10集 国语 中文字幕 1080P 10.8G MP4】
[电影] 2024年喜剧片·热辣滚烫 [mp4]
[影视] 铁爪 WEB-DL版下载 2023 The Iron Claw 23.48G
- 最新评论
-
杂物房内的旧档资源不保证有效CC下载站 评论于:05-14 不能**123 评论于:05-14 我想看看mw2ddyy 评论于:04-26 好东西阿zfy123123 评论于:04-18 谢谢楼主xiaoqi 评论于:04-12 勿在线解压,勿手机解压,请在电脑上用最新款压缩软件解压!推荐360压缩或者好压CC下载站 评论于:04-10 无法解压啊,客服能不能给个解压教程ravengrey 评论于:04-10 谢谢支持!!CC下载站 评论于:03-26 很棒的资源,感谢分享云体风身 评论于:03-26 感谢分享,好东西云体风身 评论于:03-26
- 热门tag