不能直接用::before模拟完整进度条宽度，因为position:fixed下width:100%基于视口而非滚动比例，css无法读取scrolly/scrollheight，必须用js计算进度并注入css变量；伪元素需挂载在稳定容器上，设position:relative、content:""及完整定位，推荐用transform:scalex()驱动更兼容平滑。
为什么不能直接用 ::before 模拟完整进度条宽度
很多人一上来就给容器加 ::before，设 position: fixed + width: 100%，结果发现条要么卡在顶部不动，要么滚动时消失或错位。根本原因不是伪元素不灵，而是：width: 100% 在 position: fixed 下是相对于视口宽度（window.innerWidth），而滚动进度是基于可滚动高度的比例——CSS 无法读取 scrollY 或 scrollHeight，必须靠 JS 算出数值后注入 CSS 变量。
::before 进度条必须挂载在稳定父容器上
别把 ::before 直接加在 body 上。现代框架（React/Vue）会动态替换 body 内容，伪元素会被清空。更稳的做法是：
- 选一个生命周期长、不被频繁重渲染的容器，比如
#app或main - 给该容器显式设置
position: relative（否则::before的fixed定位会“漂移”） -
::before必须声明content: ""，否则不渲染 - 必须写全定位值：
top: 0; left: 0; right: 0;，漏掉right: 0会导致条只占一半宽度或右侧截断
JS 怎么算进度值并驱动 ::before 宽度
滚动进度公式是：(window.scrollY / (document.documentElement.scrollHeight - window.innerHeight)) * 100。注意两点：
- 用
document.documentElement.scrollHeight，不是document.body.scrollHeight（后者在某些 DOCTYPE 下为 0） - 一定要减去
window.innerHeight，否则满屏滚动时进度会超 100%，导致条溢出右侧 - JS 更新方式推荐：
element.style.setProperty('--progress', progress) - CSS 侧用：
width: calc(var(--progress) * 1%)或更平滑的transform: scaleX(calc(var(--progress) / 100))
移动端和 Safari 的兼容性坑
calc() 在 background-position 中 Safari 直到 iOS 15.4+ 才支持，但 width 和 transform 没问题。所以用 ::before 做顶部进度条时：
- 优先用
transform: scaleX()驱动，比width更少触发重排，动画也更顺 - 避免在旧版 Safari 或 iOS 15.3- 上依赖
background-position: calc(...) - 如果要支持 IE11，
::before方案基本不可行（不支持 CSS 变量 +calc），得回退到width+overflow: hidden的传统方案
实际复杂点不在写法，而在滚动事件节流和首次渲染时机——scrollHeight 可能因图片异步加载未完成而偏小，导致进度条提前拉满。得监听 load 或用 ResizeObserver 补算一次。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
