滚动位置监听方法全解析

本文深入剖析了HTML中监听滚动位置的实战要点，指出单纯绑定scroll事件远远不够——必须结合requestAnimationFrame节流避免卡顿，严格等待DOMContentLoaded或load后首次读取以防“假0”，移动端还需兼顾touchmove并合理设置passive选项：只读场景用passive: true提升性能，需拦截滚动时则必须设为false；同时强调scrollY是更现代可靠的取值方式，并推荐IntersectionObserver替代手动监听以实现更精准轻量的交互效果，真正难点在于根据业务需求（如懒加载或吸顶导航）动态平衡响应及时性与性能消耗。

直接监听 scroll 事件就能拿到滚动位置，但绝大多数人漏掉了防抖和触发时机这两个关键点。

为什么 scroll 事件里 window.pageYOffset 有时是 0？

常见于页面刚加载完立刻读取，或在某些移动端 WebView 中——scroll 事件还没触发，而你手动调用时 DOM 还没完成初始布局。更隐蔽的是：部分安卓浏览器（如旧版 UC）在页面未完全渲染前，pageYOffset 会返回 0，哪怕页面明明已滚动。

• 务必等 DOMContentLoaded 或 load 后再首次读取，避免“假 0”
• 不要依赖单次读取，而是把逻辑放在 scroll 回调内实时获取
• 移动端建议同时监听 touchmove（需 { passive: false }）以防丢失首帧

addEventListener('scroll', ...) 该加 passive: true 吗？

该加，但得看用途。浏览器默认把 scroll 设为 passive: true 是为了提升滚动流畅性，可一旦你在回调里调用 event.preventDefault()（比如自定义下拉刷新），就必须显式设为 false，否则会报错：Unable to preventDefault inside passive event listener。

• 只读场景（如吸顶、懒加载）→ 用 { passive: true }，性能更好
• 需要拦截/控制滚动（如滚动锁、手势阻断）→ 必须 { passive: false }
• Chrome 控制台会警告 passive 不匹配，别忽略它

怎么稳定获取实时滚动位置，又不卡顿？

scroll 在快速滚动时每秒可能触发上百次，直接在里面跑 DOM 操作或计算，很容易掉帧。核心不是“怎么取值”，而是“什么时候取、取几次”。

• 用 requestAnimationFrame 节流：在下一帧执行位置读取，天然对齐屏幕刷新率
• 避免在回调里反复查 document.documentElement.scrollTop 和 window.pageYOffset，优先统一用 window.scrollY（现代浏览器兼容性好，且语义清晰）
• 如果只是做“滚动到某位置触发效果”，用 IntersectionObserver 替代手动监听，更轻量、更准确

let ticking = false;
window.addEventListener('scroll', () => {
  if (!ticking) {
    requestAnimationFrame(() => {
      console.log(window.scrollY); // 稳定、不卡顿
      ticking = false;
    });
    ticking = true;
  }
});

真正难的不是监听，而是判断“用户到底有没有‘停’下来”——比如懒加载图片，不能等滚动彻底停止才加载，得在滚动间隙就响应；而吸顶导航又不能在滚动中频繁重绘。这些边界，得靠业务节奏反推节流策略，不是套个防抖就行。

以上就是本文的全部内容了，是否有顺利帮助你解决问题？若是能给你带来学习上的帮助，请大家多多支持golang学习网！更多关于文章的相关知识，也可关注golang学习网公众号。