基本原理：
1、滚动到底部
元素的滚动距离 + 元素的可视距离 == 元素的滚动条总距离
2、滚动到顶部
元素的滚动距离 == 0
监听页面滚动
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"/><metahttp-equiv="X-UA-Compatible"content="IE=edge"/><metaname="viewport"content="width=device-width, initial-scale=1.0"/><title>Scroll Demo</title></head><body><style>.box{height: 5000px;text-align: center;}</style><divclass="box"id="box">打开控制台查看</div><!-- 引入节流方法 --><scriptsrc="https://cdn.jsdelivr.net/npm/[email protected]/umd/index.min.js"></script><script>// 滚动方向枚举值constDIRECTION_ENUM={DOWN:"down",UP:"up",};// 距离顶部或底部的阈值const threshold =20;// 记录前一个滚动位置let beforeScrollTop =0;functionhandleScroll(){// 距顶部var scrollTop =
document.documentElement.scrollTop || document.body.scrollTop;// 可视区高度var clientHeight =
document.documentElement.clientHeight || document.body.clientHeight;// 滚动条总高度var scrollHeight =
document.documentElement.scrollHeight || document.body.scrollHeight;// 打印数值
console.table([{label:"距顶部",value: scrollTop,},{label:"可视区高度",value: clientHeight,},{label:"滚动条总高度",value: scrollHeight,},{label:"距顶部 + 可视区高度",value: scrollTop + clientHeight,},]);// 确定滚动方向let direction =DIRECTION_ENUM.DOWN;if(beforeScrollTop > scrollTop){
direction =DIRECTION_ENUM.UP;}// 通过滚动方向判断是触底还是触顶if(direction ==DIRECTION_ENUM.DOWN){// 滚动触底if(scrollTop + clientHeight + threshold >= scrollHeight){
console.log("滚动触底");}}else{// 滚动到顶部if(scrollTop <= threshold){
console.log("滚动到顶部");}}
beforeScrollTop = scrollTop;}// 滚动节流const throttleHandleScroll = throttleDebounce.throttle(1000,
handleScroll
);// 监听滚动
window.addEventListener('scroll', throttleHandleScroll);</script></body></html>
同理，也可以监听元素的滚动
<style>.box-wrap{height: 500px;overflow-y: auto;}.box{height: 5000px;text-align: center;}</style><divclass="box-wrap"id="box"><divclass="box">打开控制台查看</div></div><script>// 监听滚动let box = document.querySelector("#box");
box.addEventListener("scroll",function(e){let scrollTop = e.target.scrollTop;let clientHeight = e.target.clientHeight;let scrollHeight = e.target.scrollHeight;// 打印数值
console.table([{label:"距顶部",value: scrollTop,},{label:"可视区高度",value: clientHeight,},{label:"滚动条总高度",value: scrollHeight,},{label:"距顶部 + 可视区高度",value: scrollTop + clientHeight,},]);});</script>
判断触底需要注意的点：
- 滚动时需要区分向上滚动还是向下滚动
- 滚动时可以设置一个阈值，并非完全触底或触顶才触发
- 滚动事件需要做节流操作，以免短时间内被多次触发
在线Demo
- 16.1、监听浏览器scroll滚动事件,触顶和触底
- 16.2、监听元素scroll滚动事件,触顶和触底
参考
js 监听页面滚动到底部，监听可视区域滚动到底部
本文转载自: https://blog.csdn.net/mouday/article/details/125444003
版权归原作者 彭世瑜 所有， 如有侵权，请联系我们删除。
版权归原作者 彭世瑜 所有， 如有侵权，请联系我们删除。