用 position: fixed 因其始终相对于视口定位，不受父容器影响；absolute 易因复杂布局错位；需设 top: 0、z-index≥1000、width 百分比、height: 4px。
滚动进度条为什么用 position: fixed 而不是 position: absolute
因为要始终贴着视口顶部（或底部）跟随滚动，不受文档流和父容器限制。absolute 会相对于最近的 position 非 static 祖先定位，一旦页面有复杂布局（比如侧边栏固定、主内容 overflow-scroll），进度条就容易错位或消失。
实操建议：
-
fixed元素脱离文档流，需手动设置top: 0和z-index（至少 1000+，避免被遮挡） - 宽度必须用百分比（如
width: 30%），不能用px或rem，否则无法动态反映滚动比例 - 别忘了加
height: 4px（或类似值），否则看不见——这是新手最常漏的样式
怎么算出当前滚动百分比：window.scrollY 和 document.body.scrollHeight 的坑
直接用 window.scrollY / document.body.scrollHeight * 100 看似合理，但实际在多数现代浏览器中会出错：当页面有 doctype（即标准模式）时，document.body.scrollHeight 不包含整个文档高度，而 document.documentElement.scrollHeight 才是正确值。
实操建议：
- 统一用
document.documentElement.scrollTop替代window.scrollY（兼容性更稳） - 总高度取
document.documentElement.scrollHeight - window.innerHeight，减去视口高度才是可滚动的“有效距离” - 记得处理边界：滚动到底时可能因四舍五入变成
100.0000001%，用Math.min(100, ...)截断
CSS 进度条动画卡顿？别用 width 做过渡
width 是触发重排（reflow）的属性，频繁更新会导致掉帧。尤其在低端设备或长列表页，肉眼可见抖动。
实操建议：
- 改用
transform: scaleX()+transform-origin: left模拟宽度变化，只触发合成（composite），性能好得多 - 给进度条加
will-change: transform（仅在需要时），提前提示浏览器做优化 - JS 更新频率别太高：监听
scroll时务必节流（如requestAnimationFrame），否则每秒可能触发上百次
移动端 Safari 滚动不触发或延迟？检查 overflow-anchor 和 -webkit-overflow-scrolling
iOS Safari 默认开启滚动锚定（overflow-anchor: auto），有时会抑制 scroll 事件触发；老项目若用了 -webkit-overflow-scrolling: touch，也可能干扰全局滚动监听。
实操建议：
- 在根元素（
html或body）上显式设overflow-anchor: none - 移除所有
-webkit-overflow-scrolling，它已被废弃，且与现代滚动监听冲突 - 测试时用真机 Safari，模拟器常表现异常——这点很容易被忽略
滚动进度条看着简单，但跨浏览器一致性、性能敏感点、移动端兼容细节，全藏在几个属性和一行计算逻辑里。写完别急着上线，先关掉 Chrome 的“Paint flashing”，看看是不是真没重排。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
