位置: IT常识 - 正文
js监听页面或元素scroll事件，滚动到底部或顶部(js监听地址栏)
发布时间：2023-12-02js监听页面或元素scroll事件，滚动到底部或顶部 
本文链接地址:https://www.jiuchutong.com/zhishi/269781.html
转载请保留说明！
推荐整理分享js监听页面或元素scroll事件，滚动到底部或顶部(js监听地址栏)，希望有所帮助，仅作参考，欢迎阅读内容。
文章相关热门搜索词:js监听url变化方法,js如何监听值的变化,js监听页面元素变化,js监听元素是否在可见区域,js监听http,js监听页面上的所有事件,js监听元素是否在可见区域,js监听页面上的所有事件,内容如对您有帮助，希望把文章链接给更多的朋友！
基本原理：
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 监听页面滚动到底部，监听可视区域滚动到底部
上一篇：windows11怎么显示文件后缀名? win11显示后缀名的两种方法(windows11怎么显示桌面图标)
下一篇：Linux系统中开起和关闭用户的磁盘空间限制的命令(linux开启)
