document.documentElement.scrollTop 在 Chrome/Firefox 中常为 0，因实际滚动容器是 body；应优先使用 window.pageYOffset 或 document.scrollingElement.scrollTop 获取准确滚动距离。
document.documentElement.scrollTop 在 Chrome/Firefox 中为什么总是 0
直接读 document.documentElement.scrollTop 在多数现代页面中返回 0，不是 bug，而是因为滚动容器实际是 document.body —— 尤其当页面没有显式设置 html { height: 100%; overflow: hidden; } 时，documentElement（即 <html>）本身不滚动，真正滚动的是 <body>。
常见错误现象：document.documentElement.scrollTop 始终为 0，但页面明明在滚动；或者在某些 iOS Safari 下值突变、不连续。
- 使用场景：监听滚动做吸顶、懒加载、滚动进度条
- 根本原因：CSS 的
overflow和height设置决定了哪个节点承载滚动行为 - 更稳妥的做法是统一用
window.pageYOffset，它始终返回视口垂直滚动距离，不依赖具体滚动容器 - 如果必须用 DOM 属性，应优先检查
document.scrollingElement（标准 API），它会返回当前实际滚动的元素（Chrome/Firefox 返回document.documentElement，Safari 旧版可能返回document.body）
兼容所有浏览器的滚动距离获取方式
不要硬写 document.documentElement.scrollTop || document.body.scrollTop —— 这在现代 Chrome 中反而会导致 body 被错误读取（body.scrollTop 在标准模式下已被忽略，仅 quirks mode 有效）。
正确姿势是：
立即学习“前端免费学习笔记（深入）”；
const scrollTop = window.pageYOffset || (document.scrollingElement && document.scrollingElement.scrollTop) || document.documentElement.scrollTop || document.body.scrollTop;
但注意：document.scrollingElement 是最权威的，IE 不支持（IE11 及以下需 fallback）；window.pageYOffset 是首选，它在所有支持滚动的浏览器中都可靠，且不依赖文档模式。
-
window.pageYOffset是只读属性，无需担心被覆盖 - 避免在事件回调里反复计算多个备选项，建议封装成函数并缓存判断逻辑
- 服务端渲染（SSR）环境无
window，需加typeof window !== 'undefined'判断
监听滚动时 scrollTop 值突然跳变或卡顿
在部分 Android WebView 或低端设备上，监听 scroll 事件时发现 window.pageYOffset 值出现“跳跃”（比如从 123 直接到 156），并非精度问题，而是浏览器做了 scroll-throttling 或合成层渲染延迟。
这不是代码写错，但会影响滚动进度条、吸顶临界判断等敏感逻辑：
- 不要用
===精确比对两个scrollTop值是否相等，改用Math.abs(a - b) 容错 - 避免在
scroll回调中直接操作 DOM（如修改 class），优先用requestAnimationFrame节流 - 若需高精度滚动位置（如滚动动画锚点），考虑用
getBoundingClientRect()配合目标元素计算相对视口位置，而非依赖全局scrollTop - CSS 中启用
will-change: scroll-position对部分浏览器有帮助，但支持有限，慎用
移动端 iOS Safari 的特殊行为
iOS Safari（尤其 15+）在地址栏收起/展开时，会触发 resize 和 scroll 事件，并重置 window.pageYOffset 的瞬时值（表现为滚动条“回弹”一小段），导致监听逻辑误判用户已回到顶部。
这不是 bug，是 Safari 为适配视口变化做的主动调整：
- 不要在
scroll事件中直接依赖scrollTop === 0判断是否在顶部，应结合document.body.scrollHeight - window.innerHeight <= scrollTop + 1判断是否到底部，或用IntersectionObserver替代 - 若必须响应“回到顶部”，建议加防抖（300ms）并对比前后两次值是否稳定为 0
- 避免监听
scroll做 heavy work；iOS 上scroll事件频率低且不可靠，touchmove+preventDefault又会破坏原生滚动体验，得不偿失
滚动距离看似简单，但跨浏览器差异藏在 CSS 渲染层之下；真正稳定的方式不是拼 DOM 属性，而是信任 window.pageYOffset，再辅以合理的容错和节流策略。
