原生滚动条无法全局重绘，需按浏览器内核分层适配：Chrome/Edge用::-webkit-scrollbar精细控制，Firefox仅支持scrollbar-width和scrollbar-color，Safari（尤其iOS）基本不可控。
原生滚动条无法全局重绘，必须按浏览器内核分层写样式；Chrome/Edge 可用 ::-webkit-scrollbar 精细控制，Firefox 仅支持 scrollbar-width 和 scrollbar-color 两个属性，Safari（尤其 iOS）基本不可控——别指望一套 CSS 覆盖所有场景。
为什么 ::-webkit-scrollbar 写了却没反应
不是代码错了，而是它根本没被触发。常见原因包括：
- 直接写在
html或body上：伪元素只对「实际触发滚动的容器」生效，比如设置了overflow-y: auto且内容真实溢出的.chat-history，而不是根节点 - 漏掉关键部分：必须同时定义
::-webkit-scrollbar（设width或height）、::-webkit-scrollbar-track（需background）、::-webkit-scrollbar-thumb（background是刚需，不设就是透明） - 没显式设宽高：
::-webkit-scrollbar { width: 8px; }缺失时，整套规则失效；width控制垂直条宽度，height控制水平条厚度，不能互换 - UI 框架或重置 CSS 干扰：某些库（如 Ant Design）会把
::-webkit-scrollbar设为display: none，得用!important覆盖（虽不优雅，但有时绕不开）
scrollbar-color 和 scrollbar-width 在 Firefox 中怎么用才有效
这两个属性和 WebKit 完全无关，是 Firefox 独有的“开关型”控制，作用域极窄：
- 必须写在触发滚动的块级元素上，比如
.list-container { scrollbar-color: #6c5ce7 #f0f0f0; scrollbar-width: thin; }；写在* {}或html上基本无效 -
scrollbar-color格式固定为scrollbar-color: <thumb> <track>，顺序反了就失效；第二个参数（轨道色）设transparent会导致轨道消失，但滑块仍可拖动，体验断裂 -
scrollbar-width只接受auto、thin、none三个值，没有像素控制；且只有thin和scrollbar-color配合时颜色才生效，none会彻底隐藏滚动条 - 不支持
:hover、圆角、阴影、渐变——所谓“定制”，仅限颜色和粗细两级
Safari（尤其是 iOS）为什么死活不认自定义滚动条
这不是你 CSS 写得不够多，而是 Safari 主动限制：
立即学习“前端免费学习笔记（深入）”；
- iOS Safari 完全忽略所有滚动条样式声明（截至 2026 年 8 月仍是如此），无论
::-webkit-scrollbar还是scrollbar-color，测试时别用 macOS Safari 代替 iOS 测试 - macOS Safari 16.4+ 才开始有限支持
scrollbar-width和scrollbar-color，但依然不认::-webkit-scrollbar；系统偏好里若开启“自动隐藏滚动条”，所有 CSS 设置直接被无视 -
::-webkit-scrollbar-thumb:hover和:active在多数 Safari 版本中不触发；加transition动画也白写 - 想在 Safari 实现圆角 + 悬停变色 + 稳定响应？唯一可靠路径是 JS 库（如
simplebar），用绝对定位重绘滚动条
真正容易被忽略的是：滚动条不是装饰品，它是交互入口。滑块太小（比如 width: 4px）会让触控设备难操作；深色模式下不能靠 @media (prefers-color-scheme: dark) 直接套用，得手动为容器类名写两套规则；而一旦引入 JS 滚动库，就得面对性能开销和可访问性退化风险——这些权衡点，比“怎么写对”更关键。
