Chrome/Edge/Safari支持::-webkit-scrollbar定制滚动条，Firefox需用scrollbar-color属性；伪元素必须配合::-webkit-scrollbar容器声明才生效，且仅对overflow非visible的块级元素有效。
Chrome/Firefox Edge里滚动条颜色改不了？先确认浏览器支持范围
只有基于WebKit/Blink内核的浏览器（Chrome、Edge、Safari）原生支持 ::-webkit-scrollbar 系列伪元素；Firefox不支持，它用的是scrollbar-color和scrollbar-width这两个CSS属性，且仅限于html或body元素生效。
所以如果你在Firefox里写了::-webkit-scrollbar却没反应——不是写错了，是根本不起作用。
- Chrome 5+、Edge 16+、Safari 7.1+ 支持
::-webkit-scrollbar全套 - Firefox 64+ 支持
scrollbar-color: <code>darkgraylightgray;，但只控制颜色，不能调宽度或圆角 - 不支持的浏览器（如旧版IE、部分安卓WebView）会直接忽略这些样式，回退到系统默认滚动条
::-webkit-scrollbar-track 和 ::-webkit-scrollbar-thumb 怎么写才生效
这两个伪元素必须配合::-webkit-scrollbar容器声明一起用，单独写::-webkit-scrollbar-track大概率无效。而且它们只对有滚动行为的块级元素起作用——比如overflow: auto或overflow: scroll的div，对body有时也受限（尤其在移动端）。
常见错误是漏掉基础容器声明：
立即学习“前端免费学习笔记（深入）”；
::-webkit-scrollbar {
width: 8px;
}
::-webkit-scrollbar-track {
background: #f1f1f1;
}
::-webkit-scrollbar-thumb {
background: #c1c1c1;
border-radius: 4px;
}
-
::-webkit-scrollbar必须定义（哪怕只设width或height），否则后续伪元素不触发 -
::-webkit-scrollbar-thumb默认透明，不设background就看不见滑块 -
border-radius超过height/width一半会失效（例如width: 6px配border-radius: 4px会被截断）
颜色值写错、透明度没处理好，导致滑块“消失”或“粘连”
滑块看不见，90%是因为background用了rgba(0,0,0,0)、transparent，或者颜色和轨道太接近。另外，hover状态不加过渡容易显得生硬，而加了transition又可能在快速拖拽时卡顿。
- 避免用
transparent或全透明rgba，至少用rgba(0,0,0,0.2)保底可见性 - 轨道
background别用纯白#fff，和多数页面背景冲突；推荐浅灰如#f5f5f5 - 想加悬停效果，只对
background做transition，别动border-radius或width，否则重绘开销大 - 移动端Safari对
::-webkit-scrollbar支持不稳定，iOS 16之前甚至完全不响应hover
要不要全局改？影响性能和可维护性吗
全局作用在body上看似省事，但实际问题不少：第三方组件（比如ant-design的Drawer、Modal）内部滚动区域可能被覆盖或冲突；某些框架（如Vue的v-for列表）动态渲染后，滚动条样式可能延迟应用或丢失。
- 优先给具体容器加类名，比如
.custom-scrollbar，再写.custom-scrollbar::-webkit-scrollbar - 避免用
!important强行覆盖，容易和组件库内置样式打架 - 如果项目要兼容Firefox，得额外写一层
@supports (scrollbar-color: auto)包裹scrollbar-color规则 - 真正在意体验一致性，建议把滚动条定制封装成SCSS mixin或CSS自定义属性，方便主题切换时批量更新
滚动条样式看着小，但跨浏览器、跨组件、跨主题时，最容易暴露CSS层叠和选择器优先级的问题。别指望一套代码到处复制粘贴能跑通。
