必须用 position: fixed 实现滚动进度条，因其绕过文档流锚定视口；宽度须由 js 动态计算 document.documentelement.scrolltop / (document.documentelement.scrollheight - window.innerheight)，并用 requestanimationframe 节流更新 css 变量驱动 transform: scalex()。
不能只靠 CSS 定位实现真正的滚动进度条，position: fixed 是必须的定位方式，但宽度必须由 JS 动态计算并注入，否则无法反映「当前滚动位置 / 总可滚动高度」这一比例关系。
为什么必须用 position: fixed 而不是 position: sticky 或 absolute
position: sticky 在父容器有 transform、overflow 或 flex 布局时会退化为 static，一滚动就消失；position: absolute 依赖最近的定位祖先，一旦页面结构变化或滚动容器嵌套加深，进度条极易错位或脱离视口。只有 position: fixed 绕过文档流，直接锚定 viewport，保证始终贴顶/贴边。
常见错误包括：
- 把进度条塞进
.main-content内部再设sticky，结果滚动后不见 - 用
absolute但没给父级加position: relative，导致定位基准漂移 - 漏设
top: 0和left: 0（或right: 0），在某些浏览器中默认偏移
滚动值读取：该用 document.documentElement.scrollTop 还是 window.scrollY
window.scrollY 在部分 iOS Safari 版本中存在延迟更新问题，且某些文档模式下不可靠；document.body.scrollTop 在 Chrome 80+ 和 Safari 中常返回 0，真实值藏在 document.documentElement.scrollTop 里。
安全写法只有一条：
- 统一读
document.documentElement.scrollTop，前提是页面有标准声明 - 分母用
document.documentElement.scrollHeight - window.innerHeight，不是document.body.scrollHeight - 加
Math.min(1, Math.max(0, ...))防止小数精度溢出或负值
更新时机与性能：别在 scroll 事件里直接改 style.width
原生 scroll 事件每秒可能触发上百次，直接在里面读 layout 属性（如 scrollHeight）再写 style.width，会强制同步重排，低端机明显卡顿。
正确做法是：
- 用
requestAnimationFrame节流，确保每帧最多更新一次 - 缓存
document.documentElement.scrollHeight，只在resize或 DOM 变化时重读 - 用
transform: scaleX()替代width，配合will-change: transform触发 GPU 合成层 - 监听时加
{ passive: true }，避免被浏览器降级为非被动事件
CSS 变量驱动比内联样式更可控
直接写 el.style.width = x + '%' 会覆盖所有 CSS 过渡、伪元素和 linear-gradient 效果；而用 CSS 自定义属性让样式层自己算宽度，能无缝衔接动画、多段色块、响应式缩放等需求。
关键组合：
- JS 注入：
document.documentElement.style.setProperty('--scroll-progress', progress) - CSS 使用：
transform: scaleX(var(--scroll-progress)); transform-origin: left; - 初始状态设
transform: scaleX(0)，避免闪现 - 移动端 Safari 对
document.body.scrollTop恒为0，必须优先取document.documentElement.scrollTop
最易被忽略的是 iOS Safari 地址栏收起/展开时 window.innerHeight 突变，但 scrollY 不同步更新——必须监听 resize 事件重新校准分母，否则进度跳变或倒退。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
