如何通过HTML的document.documentElement.scrollTop获取页面滚动距离-html教程-PHP中文网

document.documentelement.scrolltop 在 chrome/firefox 中常为 0，因实际滚动容器是 body；应优先使用 window.pageyoffset 或 document.scrollingelement.scrolltop 获取准确滚动距离。

如何通过html的document.documentelement.scrolltop获取页面滚动距离

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 是首选，它在所有支持滚动的浏览器中都可靠，且不依赖文档模式。

Wechat HTML Publisher

直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。

下载

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 判断是否到底部，或用 <code>IntersectionObserver 替代
若必须响应“回到顶部”，建议加防抖（300ms）并对比前后两次值是否稳定为 0
避免监听 scroll 做 heavy work；iOS 上 scroll 事件频率低且不可靠，touchmove + preventDefault 又会破坏原生滚动体验，得不偿失

滚动距离看似简单，但跨浏览器差异藏在 CSS 渲染层之下；真正稳定的方式不是拼 DOM 属性，而是信任 window.pageYOffset，再辅以合理的容错和节流策略。