js监测页面滑至底部响应事件

需求

  页面滑动至底部时候,触发响应

应用场景

  1. 服务协议滑动完毕可点击同意按钮;
  2. 页面滑至底部加载更多(新闻、列表等);
  3. 自动加载下一页等…

分析

  首先,既然是监听,则首要条件便是监听页面滑动(滚动)事件;其次,由于一般页面不会一屏展示完,因此需要依赖BOM来辅助完成一些计算。最后,达到某种条件,触发方法。

代码

1
2
3
4
5
6
7
8
9
10
11
12
13
 window.onscroll = function(){
//滚动条滚动时,距离顶部的距离
let scrollTop = document.documentElement.scrollTop||document.body.scrollTop;
//可视区的高度
let windowHeight = document.documentElement.clientHeight || document.body.clientHeight;
//滚动条的总高度
let scrollHeight = document.documentElement.scrollHeight||document.body.scrollHeight;
//滚动条到底部的条件
if(scrollTop + windowHeight >= scrollHeight){
//此处触发响应事件
...
}
}

附录

1
2
3
4
5
6
7
8
9
10
11
12
13
网页可见区域宽:document.body.clientWidth
网页可见区域高:document.body.clientHeight
网页可见区域宽:document.body.offsetWidth (包括边线的宽)
网页可见区域高:document.body.offsetHeight (包括边线的高)
网页正文全文宽:document.body.scrollWidth
网页正文全文高:document.body.scrollHeight
网页被卷去的高:document.body.scrollTop
网页被卷去的左:document.body.scrollLeft
//对应的dom元素的宽高有以下几个常用的:
元素的实际高度:document.getElementById("div").offsetHeight
元素的实际宽度:document.getElementById("div").offsetWidth
元素的实际距离左边界的距离:document.getElementById("div").offsetLeft
元素的实际距离上边界的距离:document.getElementById("div").offsetTop
---本文结束感谢您的阅读---

本文标题:js监测页面滑至底部响应事件

文章作者:Lomo 朱幸民

发布时间:2019年03月18日 - 14:16:30

最后更新:2019年07月10日 - 08:45:48

原始链接:https://www.zhuxingmin.com/2019/03/18/js监测页面滑至底部响应事件/

许可协议: 署名-非商业性使用-禁止演绎 4.0 国际 转载请保留原文链接及作者。

请作者喝杯咖啡吧~
0%