js监听页面或元素scroll事件，滚动到底部或顶部

基本原理：

1、滚动到底部
元素的滚动距离 + 元素的可视距离 == 元素的滚动条总距离2、滚动到顶部
元素的滚动距离  == 0

监听页面滚动

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Scroll Demo</title></head><body><style>.box {height: 5000px;text-align: center;}</style><div class="box" id="box">打开控制台查看</div><!-- 引入节流方法 --><script src="@5.0.0/umd/index.min.js"></script><script>// 滚动方向枚举值const DIRECTION_ENUM = {DOWN: "down",UP: "up",};// 距离顶部或底部的阈值const threshold = 20;// 记录前一个滚动位置let beforeScrollTop = 0;function handleScroll() {// 距顶部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><div class="box-wrap" id="box"><div class="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 监听页面滚动到底部，监听可视区域滚动到底部