原生滚动条样式无法跨浏览器统一，Firefox仅支持scrollbar-width（控制显隐与粗细），Chrome/Edge/Safari仅支持::-webkit-scrollbar（完整定制），二者互不兼容，需分条件书写且顺序不可颠倒。
原生滚动条样式无法跨浏览器统一，scrollbar-width 和 ::-webkit-scrollbar 是目前唯一可行的两条路径，但它们互不兼容、各自生效范围明确——别指望一套代码在 Chrome 和 Firefox 上都起作用。
Firefox 只认 scrollbar-width，且仅控制粗细和显隐
Firefox 从 64 版本起支持 scrollbar-width，但它只是个“开关型”属性，不能定制颜色或轨道形状：
-
auto：默认行为，宽度由系统决定 -
thin：显示窄滚动条（实际宽度仍由 UA 控制，非固定像素） -
none：完全隐藏滚动条（内容仍可滚动，仅视觉消失）
它必须写在根元素或可滚动容器上，例如：
html {
scrollbar-width: thin;
}
.container {
overflow-y: auto;
scrollbar-width: none; /* 隐藏该容器的滚动条 */
}注意：scrollbar-width 对颜色、thumb 轨道等无任何影响；也不能用 scrollbar-color（该属性已被废弃，当前 Firefox 完全忽略）。
立即学习“前端免费学习笔记（深入）”；
Chrome / Edge / Safari（WebKit/Blink 内核）靠 ::-webkit-scrollbar 系列伪元素
这套机制提供完整控制权，但仅限 WebKit/Blink 内核，且所有样式都必须成对出现才有效：
-
::-webkit-scrollbar：整个滚动条容器（设宽高） -
::-webkit-scrollbar-track：滑轨背景（建议设background，否则透明） -
::-webkit-scrollbar-thumb：拖拽块（必须设background，否则不可见） -
::-webkit-scrollbar-thumb:hover：悬停态（可选）
最小可用示例：
.container::-webkit-scrollbar {
width: 8px;
}
.container::-webkit-scrollbar-track {
background: #f1f1f1;
}
.container::-webkit-scrollbar-thumb {
background: #c1c1c1;
border-radius: 4px;
}
.container::-webkit-scrollbar-thumb:hover {
background: #a1a1a1;
}关键细节：::-webkit-scrollbar-thumb 若没设 background，会彻底消失；border-radius 在某些旧版 Safari 中不生效；width/height 必须带单位，0 值会被忽略。
如何让两者共存又不互相干扰？
没有“共存”的优雅方案，只有分条件加载：
- 先写 WebKit 规则（加
::-webkit-scrollbar），所有 Blink/WebKit 浏览器识别并应用 - 再写
scrollbar-width（不加前缀），Firefox 识别并覆盖自身行为；其他浏览器直接忽略该声明 - 不要尝试用
@supports检测::-webkit-scrollbar——它永远返回 true，无法判断是否真正生效
推荐写法（顺序不能错）：
.scrollable {
/* WebKit 专属 */
&::-webkit-scrollbar {
width: 10px;
}
&::-webkit-scrollbar-track {
background: #eee;
}
&::-webkit-scrollbar-thumb {
background: #999;
}
<p>/<em> Firefox 专属 </em>/
scrollbar-width: thin;
}若需隐藏滚动条但保留滚动能力，Webkit 下用 ::-webkit-scrollbar { display: none; }，Firefox 下用 scrollbar-width: none——二者不可混用，也不可只写其一。
最常被忽略的一点：自定义滚动条不会改变滚动行为本身，scroll-behavior: smooth、overscroll-behavior 等仍需单独设置；另外，移动端 Safari 对 ::-webkit-scrollbar 支持极差，几乎无效，别在 iOS 上依赖它做交互提示。
