滚动进度条不能用 position: sticky，因其依赖父容器滚动上下文，易受局部滚动、overflow 变化影响而失效；必须用 position: fixed 锚定视口，并用 scrollY / (body.scrollHeight - innerHeight) * 100 动态计算宽度。
滚动进度条为什么不能用 position: sticky
因为 sticky 依赖父容器的滚动上下文，而进度条需要始终贴着视口顶部（或底部），不受内容区域高度、嵌套滚动、overflow 变化影响。一旦页面里有局部滚动容器（比如弹窗里的列表），sticky 就会失效或错位。用 position: fixed 才能真正脱离文档流，锚定在视口坐标系中。
width 动态计算的核心公式是 scrollY / (document.body.scrollHeight - window.innerHeight) * 100
这个值代表当前滚动位置占“可滚动总距离”的百分比。注意不是 document.documentElement.scrollHeight——在多数现代浏览器中，body 才是实际承载内容的滚动主体；若重置了 html { height: 100% } 或设置了 body { margin: 0 }，更需确认用的是 body 而非 html。常见错误是直接用 scrollTop，但那是元素自身的滚动偏移，不是全局视口滚动量。
实操建议：
- 监听
scroll事件时，用requestAnimationFrame节流，避免频繁触发重排 - 把计算逻辑封装成函数，例如
getScrollPercent()，便于复用和测试 - 初始渲染时也要调用一次，防止首屏加载后进度条为 0%
- 考虑边界情况：当页面高度 ≤ 视口高度时，应设
width: 0%或隐藏进度条，避免负值或超 100%
Fixed 定位下如何避免遮挡内容或触发重绘抖动
用 position: fixed; top: 0; left: 0; height: 2px; 是基础，但容易出问题：
- 若页面有
transform、filter或will-change的祖先元素，可能创建新层叠上下文，导致进度条被压在下面——加z-index: 9999并确保父级没设overflow: hidden - 直接改
style.width会触发 Layout，换成transform: scaleX(...)+transform-origin: left更高效（仅触发 Composite） - 不要用
%单位做transform缩放，而是用小数（0.37而非37%），避免 CSS 解析开销 - 如果进度条需要支持深色模式或主题切换，把颜色抽成 CSS 自定义属性，例如
--progress-color: #4a6fa5，JS 只控制缩放
移动端 Safari 的 scrollY 不稳定怎么办
iOS Safari 在地址栏收起/展开时会触发 scroll 事件并重置 window.scrollY，导致进度条跳变。这不是 bug，是它的 UI 行为。解决方案不是监听 resize，而是：
- 用
document.scrollingElement.scrollTop替代window.scrollY，它更稳定且兼容所有主流浏览器 - 加一个 16ms 的防抖（
setTimeout+clearTimeout），过滤掉连续两次间隔过短的 scroll 事件 - 不依赖视觉滚动位置，改用
IntersectionObserver监听首屏关键元素（如 header）的进入/离开，作为辅助校准信号
真正难的不是算宽度，而是让这个宽度在各种滚动节奏、缩放、横竖屏切换、iOS 地址栏动画下都保持平滑可信。很多项目卡在这里，不是代码写错了，是没意识到 scroll 事件本身在不同环境下的语义差异。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
