滚动条进度动画本质是用JS监听scroll事件计算滚动比例，通过绝对定位的代理元素模拟thumb并用requestAnimationFrame优化性能，需适配WebKit内核且避免影响原生滚动体验。
滚动条进度动画的本质是伪元素 + CSS 动画
浏览器原生滚动条不支持直接对 ::-webkit-scrollbar-thumb 做 transform 或 transition 动画，因为它的尺寸和位置由滚动状态实时驱动，不是普通 DOM 元素。所谓“进度动画”，其实是用一个覆盖层模拟滚动 thumb，并手动控制其位置和动画。
常见错误现象：transition: height 0.3s 写在 ::-webkit-scrollbar-thumb 上完全无效；用 @keyframes 直接动画 background-position 看似动了，但和实际滚动不同步。
- 必须用 JS 监听
scroll事件，计算当前滚动比例（scrollTop / (scrollHeight - clientHeight)） - 用一个绝对定位的
<div class="scroll-thumb-proxy"> 覆盖在原生滚动条 thumb 位置，再对其 <code>top和height做transition - 原生 scrollbar 需设为透明：
::-webkit-scrollbar-thumb { background: transparent; }，否则会双层重叠 - 先用
getBoundingClientRect()获取容器滚动区域在视口中的位置 - 用
container.scrollHeight和container.clientHeight算出可滚动范围比例 - proxy thumb 的
top= 容器顶部偏移 + 滚动比例 × （滚动条轨道高度 − thumb 高度） - thumb 高度建议设为
min(40px, max(8px, (clientHeight / scrollHeight) * trackHeight))，避免过小或撑满 - 不要直接在
scroll回调里操作style.top - 改用
requestAnimationFrame缓存最新滚动值，只在下一帧更新一次 proxy 位置 - 给 proxy 元素加
will-change: top, height，提示浏览器提前优化渲染层 - 移动端需额外监听
touchmove，且要preventDefault()后再手动更新，否则 proxy 会滞后 - 用
CSS @supports selector(::-webkit-scrollbar)包裹所有滚动条样式，避免污染其他浏览器 - JS 中先检测
'scrollbarWidth' in document.body.style或 UA 字符串判断是否为 WebKit 内核 - 对非 WebKit 浏览器，只保留原生滚动条，不做任何 proxy 操作——动画不是刚需，流畅才是底线
- 若项目强制要求全平台动画，改用
overflow: hidden+ 自研滚动容器（如react-custom-scrollbars-2），但代价是失去原生 touch 惯性、键盘导航支持
如何让 proxy thumb 位置精准贴合原生滚动条
关键在坐标映射：原生滚动条 thumb 的 top 值不是线性等于 scrollTop，它受容器高度、内容总高、thumb 最小高度限制影响。不能简单用 top: calc(10% + 2px) 这类静态值。
使用场景：固定高度容器（如 max-height: 400px）、内部内容高度远大于容器（确保可滚动）。
立即学习“前端免费学习笔记（深入）”；
性能陷阱：scroll 事件太频繁导致卡顿
原生 scroll 事件每秒触发几十次，每次都重算位置 + 修改 DOM 样式，容易掉帧。Chrome DevTools 的 Performance 面板里常看到 Layout 占比飙升。
参数差异：requestAnimationFrame 比 throttle 更准，因为它是浏览器渲染周期同步的；而用 setTimeout(..., 16) 有延迟累积风险。
兼容性与降级处理
::-webkit-scrollbar 只在 Chromium 和 Safari 生效，Firefox 完全不支持该伪元素；iOS Safari 对 position: fixed 在滚动容器内的定位有偏差。
性能影响：强行给 Firefox 做 JS 模拟滚动条会破坏原生惯性滚动，滑动体验明显变差，不推荐。
真正难的不是让 thumb 动起来，而是让它动得准、动得省、动得不抢用户手里的滚动节奏。很多方案在 demo 里丝滑，一进真实页面就抖，问题往往出在没做 rAF 缓解或 thumb 高度没随内容动态缩放。
