::-webkit-scrollbar仅WebKit内核浏览器支持，Firefox用scrollbar-width和scrollbar-color控制，二者需条件覆盖；滑块尺寸由系统计算，仅能调外观如background、border-radius；跨浏览器需先写WebKit规则再用@supports适配Firefox。
直接用 ::-webkit-scrollbar 和 ::-webkit-scrollbar-thumb 只能在 WebKit 内核浏览器（Chrome、Edge、Safari）生效，Firefox 和旧版 IE 完全不支持，不能当作跨浏览器滚动条方案来用。
为什么 ::-webkit-scrollbar 在 Firefox 里完全没反应
Firefox 从始至终没实现这套伪元素 API，它用的是 scrollbar-width 和 scrollbar-color 这两个 CSS 属性控制滚动条粗细和颜色，且仅限于 html 或 body 元素（部分新版本支持局部容器，但兼容性仍弱）。试图在 Firefox 中写 ::-webkit-scrollbar-thumb 不会报错，但也不会渲染任何样式——它被直接忽略。
- Chrome/Edge/Safari：支持完整的
::-webkit-scrollbar系列伪元素（::-webkit-scrollbar、::-webkit-scrollbar-track、::-webkit-scrollbar-thumb、::-webkit-scrollbar-button等） - Firefox：只认
scrollbar-width: thin | auto | none+scrollbar-color: <thumb> <track> - IE10+：仅支持极简的
-ms-ime-align相关 hack，无真正自定义能力
::-webkit-scrollbar-thumb 的常见误配参数
很多人以为给 ::-webkit-scrollbar-thumb 设 height 或 width 就能控制滑块尺寸，其实不行——它的大小由滚动容器内容高度/宽度和可视区域比例自动计算，你只能影响外观：
- 必须设置
background-color或background，否则默认透明，看不见滑块 -
border-radius有效，常用来做圆角或胶囊形滑块；但设成50%时需确保宽高一致，否则会椭圆变形 - 不能用
transform动画滑块位置（它不是独立定位元素），想做 hover 缩放？可以，但要用scale()配合transform-origin: center - 避免设
opacity低于 0.6，低对比度下用户难以识别可拖拽区域
如何让自定义滚动条在 Chrome 和 Firefox 同时“看起来差不多”
没有统一 API，只能条件性覆盖：先写 WebKit 规则，再用 @supports 给 Firefox 单独声明。注意 @supports 要检测 Firefox 支持的属性，而不是检测“不支持 WebKit”：
立即学习“前端免费学习笔记（深入）”；
/* WebKit 滚动条 */
.container::-webkit-scrollbar {
width: 8px;
}
.container::-webkit-scrollbar-thumb {
background-color: #6c757d;
border-radius: 4px;
}
.container::-webkit-scrollbar-track {
background-color: #f8f9fa;
}
<p>/<em> Firefox 滚动条（仅作用于根滚动容器，如 body 或设置了 overflow 的父容器） </em>/
@supports (scrollbar-color: auto) {
.container {
scrollbar-color: #6c757d #f8f9fa;
scrollbar-width: thin;
}
}⚠️ 注意：.container 必须是实际产生滚动的元素（即设置了 overflow: auto | scroll 且内容溢出），且 Firefox 的 scrollbar-color 在 flex / grid 容器中可能失效，建议包裹一层 div 并显式设 overflow-y: auto。
真要全局统一控制，尤其是需要隐藏滚动条但保留滚动能力（比如触屏设备），得靠 overflow: overlay（已废弃）或 JavaScript 模拟滚动——但那就不是纯 CSS 能解决的了。
