必须用 fixed。因 absolute 会随内容滚动消失，无法始终显示在视口顶部；fixed 以 viewport 为基准，天然适配滚动场景，需设 top: 0、left: 0、z-index ≥ 9999，并注意 iOS bounce 的 clamp 处理。
滚动进度条的定位方式选 fixed 还是 absolute
必须用 fixed。用 absolute 会随内容滚动消失，起不到“始终显示在视口顶部”的效果。它得贴着 viewport 上边缘，不随文档流移动。
常见错误是套在某个容器里设 absolute，结果一滚就不见——因为父容器没设 position: relative 或根本没考虑滚动上下文。
-
fixed定位基准是 viewport，天然适配滚动场景 - 高度建议设
2px或3px，太粗破坏阅读节奏，太细则不易察觉 - 别忘了加
top: 0和left: 0，否则可能偏移 - z-index 至少设
9999，避免被弹窗、广告等遮挡
宽度怎么算才准：用 scrollY 还是 scrollTop
用 document.documentElement.scrollTop（或兼容 document.body.scrollTop），不是 window.scrollY —— 后者在部分 iOS Safari 下有延迟，且某些文档模式下不可靠。
总可滚动高度是 document.documentElement.scrollHeight - window.innerHeight，这是分母；当前滚动位置是分子。直接除就是 0–1 的比例。
- 别漏减
window.innerHeight，否则满屏滚动时进度条会超过 100% - IE 下
document.documentElement可能为 null，需 fallback 到document.body - 用
Math.min(1, ...)包一层，防小数精度导致宽度超限 - 示例计算：
const progress = Math.min(1, scrollTop / (scrollHeight - clientHeight))
更新时机选 scroll 还是 requestAnimationFrame
必须包裹在 requestAnimationFrame 里，直接在 scroll 事件里改样式会触发强制同步重排，尤其在低端机上卡顿明显。
滚动事件每秒触发几十次，但屏幕刷新率通常只有 60Hz，多余更新纯属浪费。
- 先用
let ticking = false做节流开关 - 在
scroll回调里只设标记，真正计算和更新丢进requestAnimationFrame - 别用
debounce，会导致进度条“跳变”，失去实时感 - 示例关键逻辑：
if (!ticking) { requestAnimationFrame(updateBar); ticking = true; }
CSS 动画卡顿？用 transform: scaleX() 替代 width
直接改 width 会触发 layout + paint，而 transform: scaleX() 只走合成器层，GPU 加速，丝滑不掉帧。
前提是进度条元素本身是独立合成层（加 will-change: transform 或 transform: translateZ(0)）。
- 初始状态设
transform: scaleX(0)，别用width: 0 - JS 中只更新
element.style.transform = `scaleX(${progress})` - 加
transition: transform 0.1s ease-out让收尾更自然，但别超过 0.2s，否则滞后感强 - 注意：scaleX 以元素自身宽度为基准，所以元素需有固定宽（如
width: 100%）
最易被忽略的是 iOS Safari 的 scroll bounce 效果——拖到顶/底再松手，scrollTop 会短暂变成负值或超限值，导致进度条倒退或爆宽。得在计算前做 clamp 处理：Math.max(0, Math.min(scrollTop, maxScroll))。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
