scrollbar-color和scrollbar-width仅在Firefox（v64+）中生效，需成对使用：前者设滑块与轨道色（顺序固定、不支持透明/渐变），后者取auto/thin/none控制粗细；Chrome/Edge/Safari须用::-webkit-scrollbar伪元素实现，二者可共存但不可混用同一容器。
scrollbar-color 和 scrollbar-width 在 Firefox 里怎么用
这两个属性只在 Firefox（v64+）中生效，Chrome、Edge、Safari 完全不识别——写进去也不会报错，但开发者工具里直接标为无效声明。常见错误是改完颜色没变化，反复检查拼写，却没意识到浏览器压根不支持。
必须成对使用：scrollbar-color 设滑块和轨道色，scrollbar-width 控制粗细；单独设 scrollbar-color 不影响宽度。
-
scrollbar-color: #6c5ce7 #a29bfe;——顺序不能反，第一个是滑块（thumb），第二个是轨道（track） - 不支持
rgba()、transparent、currentcolor或渐变，用了就退回到默认灰色滑块 -
scrollbar-width只有三个值：auto（默认）、thin（窄）、none（隐藏）；没有像素单位 - 作用范围是设置了
overflow: auto或scroll的元素，包括<textarea>和自定义<div>
Chrome/Edge/Safari 必须用 ::-webkit-scrollbar 伪元素
WebKit 内核浏览器不认 scrollbar-color，唯一可靠方案是整套 ::-webkit-scrollbar 系列伪元素。漏掉任一环节（比如只写 ::-webkit-scrollbar-thumb 却没设 ::-webkit-scrollbar 的 width），滚动条就可能完全不可见或样式失效。
关键点在于：它只作用于**实际触发滚动的容器本身**，不是父级选择器。例如 .modal::-webkit-scrollbar 无效，得写 .modal-body::-webkit-scrollbar。
立即学习“前端免费学习笔记（深入）”；
- 容器需满足三条件：有
max-height或固定height、overflow-y: auto、内容真实溢出（scrollHeight > clientHeight） -
width建议 ≥ 6px，macOS 下小于该值常被忽略 -
::-webkit-scrollbar-track别加border或box-shadow，某些 Chrome 版本会错位 -
::-webkit-scrollbar-thumb必须设background，否则透明不可见
怎么让两种方案共存且不冲突
可以同时写两套规则，浏览器各取所需：Firefox 读 scrollbar-color 和 scrollbar-width，WebKit 浏览器读 ::-webkit-scrollbar 系列。不需要 @supports 检测，因为它们互不影响。
但要注意：不要把 ::-webkit-scrollbar 写在全局（如 body），否则可能污染所有可滚动区域；应精确到具体容器，比如 .chat-log::-webkit-scrollbar。
- 配色建议同步：深色主题下，
scrollbar-color: #00cec9 #2d3436;对应::-webkit-scrollbar-thumb { background: #00cec9; }和::-webkit-scrollbar-track { background: #2d3436; } - 悬停效果只能靠
::-webkit-scrollbar-thumb:hover实现，Firefox 不支持交互态 - 如果用 CSS 变量（如
--scroll-thumb-color），需分别赋值给两套规则，无法复用同一变量
容易被忽略的细节：滚动条是否真的存在
最常踩的坑不是写错语法，而是滚动条根本没出现——导致所有样式都白写了。原因往往很实在：容器没溢出、没设 overflow、或者内容高度刚好卡在线上。
验证方法很简单：打开 DevTools → Elements → 选中容器 → Computed 面板里看 overflow-y 是否为 auto，再看 scrollHeight 是否大于 clientHeight。差 1px 都不行。
动态内容（比如 JS 加载后才溢出）更麻烦：初始没滚动条，样式不生效；加载后即使有了，伪元素规则也不会自动重应用——得确保 DOM 更新后，容器仍满足那三个条件。
