js监听页面跳转事件（js监听页面或元素scroll事件，滚动到底部或顶部）
导读：基本原理： 1、滚动到底部 元素的滚动距离 + 元素的可视距离 == 元素的滚动条总距离 2、滚动到顶部 元素的滚动距离 == 0...
基本原理：
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="https://cdn.jsdelivr.net/npm/throttle-debounce@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 监听页面滚动到底部 ，监听可视区域滚动到底部创心域SEO版权声明：以上内容作者已申请原创保护，未经允许不得转载，侵权必究！授权事宜、对本内容有异议或投诉，敬请联系网站管理员，我们将尽快回复您，谢谢合作！