滚动进度条需用scrollY / (scrollHeight - innerHeight) * 100计算百分比，监听scroll事件并用requestAnimationFrame节流，避免抖动；标签可手动驱动但兼容性差，推荐div+CSS方案。
滚动进度条怎么用 scrollY 和 document.documentElement.scrollHeight
页面滚动进度条不是原生 <progress></progress> 标签能直接解决的——它要反映的是用户当前滚动位置占整个页面高度的比例，得靠 JS 实时计算。核心公式是：(window.scrollY / (document.documentElement.scrollHeight - window.innerHeight)) * 100。注意分母不能直接用 scrollHeight，必须减去视口高度，否则拉到底部时值会超过 100%。
常见错误是直接用 scrollY / scrollHeight，结果进度条永远卡在 95% 左右；或者没监听 scroll 事件，只在页面加载时算一次，动了也不更新。
- 必须监听
scroll事件，但别用addEventListener('scroll', handler)直接绑在window上——高频触发会导致卡顿 - 推荐用
requestAnimationFrame节流：只在下一帧重绘前读取一次scrollY，避免重复计算 - IE11 不支持
scrollY，得降级用document.body.scrollTop || document.documentElement.scrollTop
怎么让进度条不随滚动抖动或跳变
抖动本质是计算值微小波动（比如 scrollY 在 1234.3 和 1234.8 之间跳），导致进度条宽度反复重绘。解决方案不是“四舍五入”，而是控制更新节奏和数值精度。
- 用
Math.round()或Math.floor()对最终百分比取整，避免小数点后两位频繁变化 - 加一个最小变化阈值：只有当新值与上一次渲染值相差 ≥ 0.5% 时才更新
progress.value或element.style.width - 别在
scroll回调里直接改 DOM，先存变量，再由requestAnimationFrame统一提交
<progress></progress> 标签能直接用于滚动进度吗
能，但必须手动驱动——<progress></progress> 不会自动感知滚动。你得自己把计算出的百分比赋给它的 value 属性，并确保 max="100"。
立即学习“前端免费学习笔记（深入）”；
容易踩的坑：
-
value写成字符串（如bar.value = '75'）会导致不渲染，必须用数字类型：bar.value = Math.round(percent) - 没设
max属性时，浏览器按默认max="1"解析，value="75"就变成 7500%，进度条直接溢出 - 样式定制时，Chrome 必须用
::-webkit-progress-value控制填充色，Firefox 只认::-moz-progress-bar，两者不能混写
为什么用 div + CSS 比 <progress></progress> 更稳妥
因为滚动进度条的核心诉求是“视觉反馈快、兼容性稳、样式可控”，而 <progress></progress> 在 IE11、旧版 Safari 和部分安卓 WebView 中行为不一致，甚至不渲染。
手写方案更直接：
- 外层容器设
position: fixed; top: 0; left: 0; width: 100%; height: 3px; - 内层进度条用
width: 0%+transition: width 0.2s linear，平滑不突兀 - 不需要伪元素，所有浏览器对
width动画支持一致 - 可加
role="progressbar" aria-valuenow="xx" aria-valuemin="0" aria-valuemax="100"保证无障碍
复杂点在于滚动事件监听的节流逻辑和首屏/尾屏的边界处理——这两处写错，进度条就会“提前到顶”或“迟迟不到底”。
