Firefox（v64+）仅需scrollbar-width和scrollbar-color即可自定义滚动条宽窄与颜色，二者必须成对使用：scrollbar-width取auto/thin/none，scrollbar-color严格按thumb track顺序指定两色，不支持透明、渐变或单值。
Firefox 用 scrollbar-width 和 scrollbar-color 就够了
Firefox（v64+）原生支持这两个标准属性，不用伪元素、不依赖前缀。但必须成对出现，单独写 scrollbar-color 不会改变宽度，单独写 scrollbar-width 也不会变色。
常见错误是改完颜色没反应，结果发现浏览器是 Chrome——这两个属性在 Chrome/Edge/Safari 里完全被忽略，开发者工具里直接标为“invalid property”。
-
scrollbar-width只接受三个值：auto（默认）、thin（窄）、none（隐藏但仍可滚动），不能写8px或其他单位 -
scrollbar-color严格两参数：第一个是滑块（thumb）色，第二个是轨道（track）色，顺序反了就失效 - 不支持
rgba()、transparent、currentcolor或渐变；用了就退回到灰色默认滑块 - 只对设置了
overflow: auto或scroll且真实溢出的元素生效
Chrome/Edge/Safari 必须用 ::-webkit-scrollbar 系列伪元素
WebKit 内核浏览器不认 scrollbar-color，唯一可靠方案是整套 ::-webkit-scrollbar 规则。漏掉任意一个环节，滚动条可能直接消失或样式不生效。
关键点在于：它只作用于**实际触发滚动的容器本身**，不是父选择器。比如 .modal::-webkit-scrollbar 没用，得写 .modal-body::-webkit-scrollbar——因为只有 .modal-body 才真正溢出并产生滚动条。
立即学习“前端免费学习笔记（深入）”；
- 容器必须满足三条件：有
max-height或固定height、设置overflow-y: auto、内容真实溢出（scrollHeight > clientHeight） -
::-webkit-scrollbar控制整体宽度（垂直滚动条）或高度（水平滚动条），建议 ≥6px，macOS 下小于该值常被忽略 -
::-webkit-scrollbar-track设轨道背景，::-webkit-scrollbar-thumb设滑块背景；两者都必须显式声明，否则可能透明或不可见 - 滑块支持圆角（
border-radius）、渐变、甚至背景图，比 Firefox 的限制宽松得多
怎么同时兼容 Firefox 和 Chrome 系统？
可以共存，但不能混用同一套规则。把两套写法一起加到 CSS 里，各浏览器自动忽略不支持的部分，不会报错也不会冲突。
例如想让所有可滚动区域（包括 body 和自定义容器）都统一风格，直接这样写：
.custom-scroll, body {
scrollbar-width: thin;
scrollbar-color: #81ecec #f7f9fc;
}
.custom-scroll::-webkit-scrollbar, body::-webkit-scrollbar {
width: 8px;
}
.custom-scroll::-webkit-scrollbar-track, body::-webkit-scrollbar-track {
background: #f7f9fc;
}
.custom-scroll::-webkit-scrollbar-thumb, body::-webkit-scrollbar-thumb {
background: #81ecec;
border-radius: 4px;
}
注意：不要试图在同一个选择器里混用两种写法，比如给 body 同时写 scrollbar-color 和 ::-webkit-scrollbar ——虽然能跑，但维护性差，且容易误删某一条导致某浏览器失效。
为什么写了但没变化？先查这三点
最常卡住的地方不是语法，而是容器状态本身。滚动条样式不会凭空出现，它依赖真实的滚动行为。
- 检查目标元素是否真有溢出：打开 DevTools → Computed 面板，确认
overflow-y: auto生效，且scrollHeight > clientHeight - 确认没有父级
overflow: hidden把滚动截断，或者pointer-events: none导致滑块无法拖动 - 在 Firefox 中按
Ctrl + 0重置缩放，某些缩放比例下scrollbar-width: thin会被强制回退为auto
复杂点在于：滚动条样式不是“画上去”的装饰，而是浏览器对滚动容器状态的响应式渲染。没看到效果，八成是容器还没进入“可滚动”状态，而不是 CSS 写错了。
