核心是用window.scrollY除以document.documentElement.scrollHeight - window.innerHeight得到0～1归一化进度；需Math.min(1,Math.max(0,progress))截断防越界，配合requestAnimationFrame节流+transform:scaleX()实现平滑高效更新。
滚动位置怎么映射到进度值
核心是用 window.scrollY 除以 document.documentElement.scrollHeight - window.innerHeight，得到 0～1 的归一化进度。别直接用 scrollHeight 减去 offsetHeight，后者在某些浏览器里可能不准；window.innerHeight 才是视口真实高度。
常见错误是忽略页面缩放或滚动条占位——比如 macOS 默认隐藏滚动条，但 scrollHeight 仍包含它占用的空间，导致最大进度略超 1。稳妥做法是加个 Math.min(1, Math.max(0, progress)) 截断。
CSS 进度条怎么实现平滑更新
用 transform: scaleX() 配合 will-change: transform 是最轻量的方案，比改 width 或 left 更高效。不要用 transition 直接过渡 scaleX，它会在快速滚动时明显卡顿。
正确做法是：用 requestAnimationFrame 节流 + transform 动画：
let ticking = false;
function updateProgress() {
if (!ticking) {
requestAnimationFrame(() => {
const progress = Math.min(1, Math.max(0,
window.scrollY / (document.documentElement.scrollHeight - window.innerHeight)
));
progressBar.style.transform = `scaleX(${progress})`;
ticking = false;
});
ticking = true;
}
}
window.addEventListener('scroll', updateProgress);
怎么避免滚动监听影响主线程性能
原生 scroll 事件触发太频繁（每秒几十次），直接在里面算进度、改样式会阻塞渲染。必须节流，但别用固定时间间隔（如 debounce 16ms），容易丢帧。
- 优先用
requestAnimationFrame，它和屏幕刷新率同步，自然节流 - 如果需要更高精度（比如配合 IntersectionObserver 做分段动画），可结合
getBoundingClientRect()算容器内滚动比例，而非全页 - 移动端要注意
touchmove也得监听，iOS Safari 有时不触发scroll事件
进度条在 SPA 里为什么不动或跳变
单页应用路由切换后，scrollHeight 可能没及时更新（尤其是异步加载内容），导致分母还是旧值，进度计算失真。React/Vue 项目里不能只靠初始挂载监听。
解决方法：
- 在路由变化后手动触发一次
updateProgress() - 监听
resize事件，因为内容重排可能改变scrollHeight - Vue 用
nextTick、React 用useLayoutEffect确保 DOM 更新完成后再读取尺寸
最常被忽略的是：服务端渲染（SSR）首屏时，JavaScript 尚未执行，进度条 DOM 可能被提前渲染成 0%，但没绑定逻辑——得确保初始化代码在 DOM ready 后立即运行，而不是等 DOMContentLoaded 之后才绑事件。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
