scrollbar-color仅在Firefox（64+）中生效，Chrome、Edge、Safari等WebKit/Blink内核浏览器完全不支持，必须使用::-webkit-scrollbar伪元素系列实现等效效果。
scrollbar-color 在哪些浏览器里能用
scrollbar-color 是 CSS 原生支持的滚动条颜色控制属性，但只在 Firefox 中生效。Chrome、Edge、Safari 都不识别它——不是兼容性差，是根本没实现。如果你写 scrollbar-color: #ff6b6b #f5f5f5;，Firefox 会按预期渲染，其他浏览器直接忽略，回退到系统默认滚动条样式。
常见误判是看到 Can I Use 上标“部分支持”，就以为加个前缀或配合 scrollbar-width 就能通吃。实际上：scrollbar-width 也仅限 Firefox（用来设宽窄），而 WebKit 内核（Chrome/Safari）走的是另一套伪元素方案。
Firefox 下怎么正确设置 scrollbar-color
语法很简单：scrollbar-color 接两个颜色值，顺序固定：第一个是滑块（thumb）色，第二个是轨道（track）色。必须同时提供，不能只写一个。
-
scrollbar-color: #007bff #f8f9fa;✅ 合法，深蓝滑块 + 浅灰轨道 -
scrollbar-color: #007bff;❌ 无效，缺少轨道色 -
scrollbar-color: auto;❌ 不是可选值，该属性不接受auto - 颜色支持所有标准格式：
#rgb、rgb()、hsl()、命名色、甚至var(--brand-primary)（只要变量已定义）
它作用于整个元素的滚动区域，所以通常写在 html 或 body 上；若只想改某个容器（如 .chat-log），直接加在对应选择器即可，无需额外声明 overflow。
立即学习“前端免费学习笔记（深入）”；
Chrome / Edge 怎么实现等效效果
WebKit/Blink 内核不用 scrollbar-color，而是靠 ::-webkit-scrollbar 伪元素系列。这不是标准属性，但目前是唯一可行路径。
关键点：
- 必须显式设置
width或height（横向滚动时），否则伪元素不渲染 -
::-webkit-scrollbar-track控制轨道，::-webkit-scrollbar-thumb控制滑块，两者需分开设背景色 - 滑块圆角用
border-radius，但注意 Chrome 120+ 对border-radius支持更稳，旧版可能锯齿 - 别漏掉
::-webkit-scrollbar-thumb:hover，否则悬停无反馈，体验断层
示例（适配品牌色）：
/* 滚动条整体宽度 */
.chat-container::-webkit-scrollbar {
width: 8px;
}
/* 轨道 */
.chat-container::-webkit-scrollbar-track {
background: #f5f5f5;
}
/* 滑块 */
.chat-container::-webkit-scrollbar-thumb {
background: #007bff;
border-radius: 4px;
}
.chat-container::-webkit-scrollbar-thumb:hover {
background: #0056b3;
}为什么不能只靠 scrollbar-color 做全平台方案
因为它的存在本身就是一个“Firefox 专属开关”。你无法用它触发降级逻辑，也不能和 ::-webkit-scrollbar 共存并指望浏览器自动择优——它们互不感知。如果只写 scrollbar-color，Chrome 用户看到的就是原生丑滚动条；如果只写 WebKit 伪元素，Firefox 用户反而可能因优先级问题把 scrollbar-color 覆盖掉（尽管概率低）。
真正落地时得并行写两套：
- 先写
scrollbar-color（Firefox 受益） - 再写
::-webkit-scrollbar块（Chrome/Edge/Safari 受益） - 避免在同一个选择器里混用
background和scrollbar-color，以防意外交互
另外注意：iOS Safari 完全不支持任何自定义滚动条，包括 ::-webkit-scrollbar。这点常被忽略，测试时务必真机验证。
