scrollbar-color 仅 Firefox 支持（v64+），需搭配 scrollbar-width 使用，取值为 thumb-color track-color，不支持透明/渐变；Chrome/Edge/Safari 需用 ::-webkit-scrollbar 伪元素实现。
scrollbar-color 在哪些浏览器里能用
scrollbar-color 是 Firefox 专有属性，仅在 Firefox（包括 Firefox for Android）中生效。Chrome、Edge、Safari 完全忽略它——不是不支持“部分”，而是压根不识别。如果你在 Chrome 里写 scrollbar-color: #6c5ce7 #a29bfe;，开发者工具里会直接标为无效声明。
常见错误现象：改完 CSS 滚动条没变色，反复检查颜色值和拼写，却没意识到浏览器根本不吃这一套。
- Firefox 支持从版本 64 开始（2018 年底）
- 必须配合
scrollbar-width才能控制粗细，单独设scrollbar-color不影响宽度 - 该属性只作用于根滚动容器（
html或设置了overflow: auto/scroll的块），对<textarea>或自定义滚动区域（如div）也有效，但前提是它们有滚动行为
scrollbar-color 的取值规则和常见配色坑
scrollbar-color 接收两个颜色值：scrollbar-color: <thumb-color> <track-color>;。前者是滑块（thumb）颜色，后者是轨道（track）背景色。顺序不能反，且不支持透明、渐变或 currentcolor。
容易踩的坑：
立即学习“前端免费学习笔记（深入）”；
- 写成
scrollbar-color: #6c5ce7;（只给一个值）→ 无效，浏览器静默忽略 - 用
rgba(108, 92, 231, 0.8)→ Firefox 不支持 alpha 通道，会退回到默认灰色滑块 - 轨道色设为
#ffffff但容器背景也是白色 → 滑块拖不动、视觉消失，实际仍可操作，但用户以为“坏了” - 深色主题下用浅色滑块但没同步调亮轨道 → 对比度过高，显得突兀
推荐搭配示例：scrollbar-color: #81ecec #f7f9fc;（青蓝滑块 + 极浅灰轨道），适合浅色 UI；scrollbar-color: #00cec9 #2d3436;（青绿滑块 + 深灰轨道），适配深色背景。
怎么让 Chrome/Edge 也生效：只能靠伪元素 hack
Chrome、Edge、Safari 不认 scrollbar-color，但支持一套私有伪元素：::-webkit-scrollbar 系列。这是唯一可行的跨浏览器方案，但必须整套写全，漏掉任一环节都可能失效。
关键点：
-
::-webkit-scrollbar控制整体宽度（对应 Firefox 的scrollbar-width） -
::-webkit-scrollbar-thumb控制滑块样式（对应scrollbar-color的第一个值） -
::-webkit-scrollbar-track控制轨道样式（对应scrollbar-color的第二个值） - 必须显式设置
background，否则滑块透明不可见；border-radius建议加上，不然滑块是直角矩形，体验生硬
最小可用示例：
html {
scrollbar-width: thin; /* Firefox */
scrollbar-color: #6c5ce7 #a29bfe; /* Firefox */
}
/* WebKit 内核覆盖 */
html::-webkit-scrollbar {
width: 8px;
}
html::-webkit-scrollbar-thumb {
background: #6c5ce7;
border-radius: 4px;
}
html::-webkit-scrollbar-track {
background: #a29bfe;
}scrollbar-width 的三种值和实际表现差异
scrollbar-width 是 Firefox 的配套属性，只有三个关键字值：auto、thin、none。它不接受像素值，也不能设成 0 或 hidden。
各值含义与风险：
-
auto：系统默认宽度（通常 16–17px），最安全，但无法统一设计语言 -
thin：Firefox 自行压缩（约 8–10px），视觉轻量，但某些版本下滑块过小难点击，尤其触屏设备 -
none：完全隐藏滚动条（但滚动功能仍在），风险最高——用户可能误以为内容不可滚动，尤其当容器无明显溢出提示时
注意：scrollbar-width: none 不等于 overflow: hidden，内容仍可滚，只是没了视觉线索。若真要禁用滚动，请用 overflow: hidden 或 JS 阻止事件。
复杂点在于：没有浏览器能通过纯 CSS 实现“滚动条 hover 显现”，scrollbar-width: thin 是最接近的妥协方案，但需搭配足够对比度的 scrollbar-color，否则滑块在缩窄后更难发现。
