纯css无法实现精确滚动进度条，因视口高度、文档总高度和滚动偏移量等动态值需js读取并注入css变量；必须用requestanimationframe节流+document.documentelement.scrolltop精确计算，并校验边界异常值。
滚动进度条为什么不能只用 CSS
纯 CSS 实现的滚动进度条（比如用 position: sticky + transform: scaleX() 配合伪元素）本质是“视觉模拟”，它无法精确反映真实滚动比例——因为视口高度、文档总高度、滚动偏移量这些动态值必须由 JS 读取。CSS 变量本身不支持表达式或实时计算，--scroll-progress 的值只能由 JS 注入，CSS 负责消费它。
用 scroll 事件 + document.documentElement.scrollTop 计算进度
关键不是监听 window.onscroll，而是用 requestAnimationFrame 节流 + 精确读取滚动状态。现代页面常有 overflow: hidden 或嵌套滚动容器，所以必须确认目标是整个文档滚动：
-
document.documentElement.scrollTop是标准方式（兼容 Chrome/Firefox/Safari），比window.pageYOffset更可靠 - 总可滚动高度用
document.documentElement.scrollHeight - window.innerHeight，不能用document.body.scrollHeight（body 可能被重置 height） - 进度值范围必须归一化到 0–1，避免超出导致 CSS 动画异常
示例逻辑：
const progressBar = document.querySelector('.progress-bar');
function updateProgress() {
const scrollTop = document.documentElement.scrollTop;
const maxScroll = document.documentElement.scrollHeight - window.innerHeight;
const progress = Math.max(0, Math.min(1, scrollTop / maxScroll));
document.documentElement.style.setProperty('--scroll-progress', progress);
}
window.addEventListener('scroll', () => requestAnimationFrame(updateProgress));
linear-gradient 配合 clip-path 实现真正平滑的视觉效果
只用 width 或 scaleX() 做进度条，在快速滚动时容易卡顿或跳变。更稳的方式是用渐变背景 + 裁剪：
将一个或多个视频上传至YouTube。当用户想“上传到YouTube”“发YouTube”“批量上传”“upload to YouTube”“post videos to YouTube”或发布到YouTube时使用此技能。
- 用
linear-gradient(to right, #4a6fa5, #6b8cbc)作底色，避免纯色拉伸失真 - 用
clip-path: inset(0 0 0 calc(100% - var(--scroll-progress) * 100%))裁剪右侧未加载区域（注意单位：百分比需在 CSS 中乘以 100） - 必须加
will-change: clip-path或transform: translateZ(0)触发硬件加速，否则 iOS Safari 上仍会掉帧
CSS 示例：
.progress-bar {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 4px;
background: linear-gradient(to right, #4a6fa5, #6b8cbc);
clip-path: inset(0 0 0 calc(100% - var(--scroll-progress, 0) * 100%));
will-change: clip-path;
}
移动端 Safari 的 scrollTop 异常和修复
iOS Safari 在“橡皮筋”回弹时会让 scrollTop 变成负数或超过 scrollHeight，导致进度条反向抽搐或卡死在 100%。必须过滤异常值：
- 检查
scrollTop → 强制设为 0 - 检查
scrollTop > maxScroll→ 强制设为maxScroll（尤其在页面底部触发 pull-to-refresh 后） - 不要依赖
scrollend事件（Safari 17+ 才支持，且兼容性差），节流 + 边界校验更稳妥
修正后的计算片段：
const scrollTop = Math.max(0, document.documentElement.scrollTop); const maxScroll = Math.max(0, document.documentElement.scrollHeight - window.innerHeight); const progress = maxScroll === 0 ? 0 : Math.min(1, scrollTop / maxScroll);
真正难的是让进度条在各种缩放、横竖屏切换、动态内容加载后仍保持数值连续——每次 DOM 变化都可能改变 scrollHeight，但 scrollTo 不会自动触发 scroll 事件，这种边界情况得靠 MutationObserver 补一手，不过大多数项目里，先确保基础滚动逻辑不崩就够了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
