纯css无法实现真正响应滚动的进度条，因::before不读取scrolly或scrollheight，所谓“纯css”实为视觉欺骗；必须用js计算进度并注入css变量，通过transform: scalex驱动伪元素平滑渲染。
纯 CSS 无法实现真正响应滚动的进度条——::before 只能静态渲染，不读取 window.scrollY 或 document.documentElement.scrollHeight，所谓“纯 CSS 实现”实际是视觉欺骗或固定比例模拟，上线后会错位、卡死、提前满格。
为什么直接用 ::before + position: fixed 会失效
常见错误现象：进度条始终停在顶部不动，或滚动时突然消失、右侧截断、拉伸超出视口。
-
width: 100%在position: fixed下解析为视口宽度（window.innerWidth），和滚动比例无关 -
::before挂在body上时，React/Vue 等框架重渲染会清空伪元素 - 漏写
content: ""→ 伪元素根本不渲染 - 定位值不全（比如只写
top: 0; left: 0;，没写right: 0;）→ 宽度计算异常
必须用 JS 计算进度并注入 CSS 变量
核心公式：(window.scrollY / (document.documentElement.scrollHeight - window.innerHeight)) * 100，注意两点：
- 必须用
document.documentElement.scrollHeight，document.body.scrollHeight在部分 DOCTYPE 下返回0 - 必须减去
window.innerHeight，否则滚动到底部时结果 > 100，导致::before溢出 - 推荐用
transform: scaleX(calc(var(--progress) / 100))驱动，比width更平滑、不触发重排 - 更新方式用
element.style.setProperty('--progress', progress)，避免内联样式污染
容器与伪元素的正确挂载方式
不能把 ::before 直接加在 body 或 html 上，要选一个稳定、不被框架频繁替换的容器：
- 例如
#app、main或自定义的.scroll-container - 该容器必须显式设置
position: relative，否则::before的fixed定位会“漂移”到视口坐标系 -
::before必须声明content: ""、position: absolute（不是fixed）、top: 0、left: 0、right: 0、height: 4px - 避免用
background-position: calc()驱动，iOS 15.3 及更早 Safari 不支持
真正难的不是写几行 CSS，而是滚动事件节流、首次渲染时机判断、以及图片异步加载导致 scrollHeight 初始偏小引发的进度条“提前拉满”——这些都得靠 JS 补全，CSS 只负责呈现。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
