要监控页面滚动位置，需监听scroll事件并用window.scrollY或document.documentElement.scrollTop获取偏移量，结合防抖、IntersectionObserver、滚动方向判断及requestAnimationFrame优化性能与兼容性。
要监控页面滚动位置，核心是监听 scroll 事件，并通过 window.scrollY（或 document.documentElement.scrollTop）获取当前垂直滚动偏移量。关键在于性能优化和兼容性处理，避免频繁触发导致卡顿。
基础监听与获取滚动值
最简方式是绑定 scroll 事件，读取 window.scrollY（现代浏览器推荐）或回退到 document.documentElement.scrollTop（兼容 IE）：
- 使用
window.scrollY获取当前距顶部的像素值，返回整数 - 若需兼容老版本 IE，可 fallback 到
document.documentElement.scrollTop || document.body.scrollTop - 注意：该值在页面未滚动时为
0，向下滚动时递增
防抖优化滚动监听
原生 scroll 事件触发频率极高（每毫秒多次），直接执行逻辑易造成性能问题。推荐用防抖（debounce）控制执行频次：
- 设定一个延迟时间（如 100ms），仅在用户停止滚动后才执行回调
- 可用
setTimeout+clearTimeout手动实现，或引入 Lodash 的_.debounce - 示例：滚动停止 150ms 后才更新导航高亮状态，避免反复重绘
监听滚动进入特定区域
常用于“滚动触发动画”或“懒加载”，需判断元素是否进入视口：
立即学习“Java免费学习笔记（深入）”；
- 用
element.getBoundingClientRect()获取元素相对于视口的位置 - 检查
top < window.innerHeight且bottom > 0，即元素顶部在视口下方、底部在视口上方 - 配合
IntersectionObserver更高效（推荐用于现代项目），它原生支持阈值、惰性监听，无需手动计算
记录并响应滚动变化
实际应用中常需持续跟踪滚动状态，比如吸顶导航、返回顶部按钮显隐：
- 定义变量缓存上一次滚动值，对比
scrollY变化方向（向上/向下） - 结合
window.innerHeight和document.documentElement.scrollHeight判断是否滚动到底部 - 避免在 scroll 回调中直接修改 DOM；优先用 CSS class 切换，或合并到
requestAnimationFrame中批量更新
不复杂但容易忽略细节，比如兼容写法、节流时机、视口判断边界条件。按需组合上述方法，就能稳定支撑各类滚动交互需求。
