scrollbar伪元素不支持transition，因其不属于常规渲染树；应通过transform+requestAnimationFrame模拟缓动，或用scrollIntoView({behavior:'smooth'})等滚动API实现真正平滑效果。
scrollbar 伪元素不支持 transition
直接给 ::-webkit-scrollbar 或其子部件（如 ::-webkit-scrollbar-thumb）加 transition 是无效的——浏览器根本不触发重绘，样式变化始终是瞬时的。这不是写法问题，而是 WebKit/Blink 的限制：滚动条伪元素不属于常规渲染树，transition 对它们无感知。
用 transform 模拟“过渡感”的可行路径
虽然无法过渡 scrollbar 本身，但可通过包裹容器 + 自定义滚动行为间接实现视觉缓动效果：
- 用
overflow: hidden隐藏原生滚动条，把内容层套进一个带transform: translateY()的容器中 - 监听
wheel或scroll事件，用requestAnimationFrame驱动平滑transform变化 - 同步控制一个透明的“滚动指示器”（比如右侧浮动条），对其
height和top应用transition
示例关键片段：
.scroller {
overflow: hidden;
height: 400px;
}
.scroller-content {
transform: translateY(0);
transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
仅美化 scrollbar 时的兼容性取舍
如果目标只是让滚动条“看起来更顺滑”，而非真正过渡其尺寸/颜色，可考虑以下实际手段：
立即学习“前端免费学习笔记（深入）”；
- Chrome/Edge 中，
::-webkit-scrollbar-thumb:hover的背景色变化虽不能transition，但可用background-image: linear-gradient()配合opacity微调来弱化突变感 - Firefox 不支持任何 scrollbar 伪类动画，
scrollbar-width和scrollbar-color是静态声明，连 hover 都不响应 - 不要尝试用
@keyframes动画::-webkit-scrollbar-thumb——它不会播放
真正需要过渡滚动状态时，换思路
当业务场景要求“滚动位置变化有缓动”（比如锚点跳转、分页滚动），应放弃操作 scrollbar 样式，转而：
- 用
scrollIntoView({ behavior: 'smooth' })（注意 Safari 15.4+ 才稳定支持） - 用
element.scrollTo({ top, behavior: 'smooth' }) - 自行实现 easing scroll（如用
easeInOutCubic计算每帧 offset）
这些方案作用于滚动容器本身，能真正触发 layout & paint 流程，transition 或 animation 才有生效基础。 scrollbar 样式永远只是附属显示，别让它承担动效逻辑。
