应使用window.scrolly / (document.documentelement.scrollheight - document.documentelement.clientheight) * 100计算滚动百分比，因可滚动距离为文档总高减视口高，且需统一用document.documentelement属性避免body样式干扰。
滚动高度与文档总高度怎么算才准
直接用 window.scrollY 除以 document.body.scrollHeight 常见但不准——body 可能被重置样式撑开或收缩，尤其在有 margin、padding 或 box-sizing 差异时。更稳的方式是用 document.documentElement：它代表整个文档根元素（即 html 标签），不受 body 样式干扰。
-
scrollTop取document.documentElement.scrollTop（兼容 IE）或window.scrollY -
scrollHeight用document.documentElement.scrollHeight，不是body - 若页面有横向滚动条，
scrollHeight会包含其占用空间，需确保html { overflow-x: hidden; }
进度条宽度更新时机选哪个事件
用 scroll 事件最直接，但高频触发易卡顿；用 requestAnimationFrame 节流是必须的，否则在快速滚动时进度跳变明显。
- 不要在
scroll回调里直接设style.width，先缓存计算值，再统一在下一帧更新 - 避免监听
window，改用document.documentElement的scroll（部分安卓 WebView 对window支持差） - 首次加载时也要手动触发一次计算，否则初始进度为 0%
CSS 进度条怎么贴顶且不遮挡内容
常见错误是把进度条放在 body 顶部用 position: fixed，结果被某些 z-index 较高的导航栏盖住。更稳妥的是用 position: sticky + top: 0，让它随文档流自然“吸附”到视口顶部。
- 容器要设
height: 4px、background: #4a9eff，子元素用width: 0%+transition: width 0.2s linear - 避免用
z-index: 9999，改用z-index: 100并确保父级没有更低的z-index截断层 - 移动端 Safari 中
fixed在滚动时可能闪烁，sticky更稳定
为什么滚动到页脚时进度不到 100%
因为 scrollHeight - clientHeight 是最大可滚动距离，而 scrollTop 最大只能到这个值；但用户常误以为“到底了 = 100%”，实际公式应是：progress = (scrollTop / (scrollHeight - clientHeight)) * 100。漏掉 - clientHeight 就会导致最后 5–10% 永远达不到。
-
clientHeight必须取document.documentElement.clientHeight，不是window.innerHeight（后者含地址栏变化） - 当页面内容不足一屏时，
scrollHeight ，此时应强制设 <code>progress = 0或隐藏进度条 - 某些 CMS（如 WordPress）会在
body后插入空div，导致scrollHeight虚高，需用getBoundingClientRect()校验实际内容高度
实际实现中最容易被忽略的是 clientHeight 和 scrollHeight 的来源一致性——混用 document.body 和 document.documentElement 会导致分子分母量纲错位，数值忽大忽小。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
