HTML中使用document.documentElement.scrollTop获取页面滚动距离的方法如下：获取滚动距离document.documentElement.scrollTop 会返回当前页面垂直方向的滚动距离（单位为像素）。示例代码 const scrollY = document.documentElement.scrollTop; console.log("页面垂直滚动距离：

在HTML中获取页面滚动距离看似简单，实则暗藏兼容性陷阱：`document.documentElement.scrollTop` 在Chrome和Firefox中常返回0，并非代码错误，而是因为实际滚动容器通常是``而非``元素；现代开发应优先使用稳定可靠的`window.pageYOffset`，或通过`document.scrollingElement.scrollTop`精准定位真实滚动节点，同时兼顾IE兼容性与SSR环境安全；针对移动端Safari视口变化、Android WebView滚动跳变等特殊行为，还需配合容错判断、`requestAnimationFrame`节流及`getBoundingClientRect()`等策略，才能实现平滑、准确、跨端一致的滚动交互体验。

document.documentElement.scrollTop 在 Chrome/Firefox 中为什么总是 0

直接读 document.documentElement.scrollTop 在多数现代页面中返回 0，不是 bug，而是因为滚动容器实际是 document.body —— 尤其当页面没有显式设置 html { height: 100%; overflow: hidden; } 时，documentElement（即 ）本身不滚动，真正滚动的是 。

常见错误现象：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，再辅以合理的容错和节流策略。

文中关于的知识介绍，希望对你的学习有所帮助！若是受益匪浅，那就动动鼠标收藏这篇《HTML中使用document.documentElement.scrollTop获取页面滚动距离的方法如下：获取滚动距离document.documentElement.scrollTop 会返回当前页面垂直方向的滚动距离（单位为像素）。示例代码 const scrollY = document.documentElement.scrollTop; console.log("页面垂直滚动距离：" + scrollY + "px");实时监听滚动事件 如果需要在用户滚动页面时动态获取滚动距离，可以使用 window.addEventListener('scroll', ...)：window.addEventListener('scroll', () => { const scrollY = document.documentElement.scrollTop; console.log("当前滚动距离：" + scrollY + "px"); });兼容性说明 document.documentElement.scrollTop 在现代浏览器中广泛支持。如果需要兼容旧版浏览器，也可以使用 window.pageYOffset，其效果与 document.documentElement.scrollTop 类似。注意事项 该属性是只读的，不能直接修改。如果页面有多个滚动容器（如嵌套的