firefox 用 scrollbar-width 控制滚动条粗细和可见性，仅支持 auto、thin、none；scrollbar-color 设置滑块与轨道颜色，须配合 overflow: auto/scroll 生效。
Firefox 用 scrollbar-width 控制粗细和可见性
Firefox 不支持 WebKit 的伪元素滚动条样式，但提供了 scrollbar-width 和 scrollbar-color 两个 CSS 属性，仅作用于其原生滚动条（::-moz-scrollbar 已废弃）。它们只能设在根元素或可滚动容器上，且不支持圆角、阴影等精细控制。
常见错误是把它写在子元素里，或误以为能像 WebKit 那样定制轨道/滑块形状：
-
scrollbar-width只接受auto、thin、none—— 没有像素值，thin在 Firefox 97+ 才稳定支持 -
scrollbar-color接收两个颜色：滑块色 + 轨道色，顺序不能反，比如scrollbar-color: #6c5ce7 #e0e0e0 - 必须配合
overflow: auto或scroll才生效，纯overflow: hidden容器下无效
Chrome/Safari/Edge 用 ::-webkit-scrollbar 系列伪类
WebKit 内核浏览器通过一组伪类暴露滚动条的各个部分，但它们是实验性特性，无规范保证，且仅对 overflow 触发的原生滚动条生效（不适用于 position: fixed 自实现滚动、Canvas 渲染或第三方虚拟滚动库）。
最常漏掉的是 ::-webkit-scrollbar 本身必须声明宽度/高度，否则后续伪类不会渲染：
-
::-webkit-scrollbar：定义整体尺寸，width（垂直滚动条）或height（水平滚动条），至少设为8px否则不可见 -
::-webkit-scrollbar-track：轨道背景，建议加border-radius和background-clip: padding-box避免圆角被裁切 -
::-webkit-scrollbar-thumb：滑块，推荐用background: linear-gradient()替代纯色，避免在高缩放下出现锯齿 - 不要给
thumb设border—— 它会撑大实际可拖拽区域，导致拖动不跟手
div.custom-scroll {
overflow-y: auto;
}
div.custom-scroll::-webkit-scrollbar {
width: 10px;
}
div.custom-scroll::-webkit-scrollbar-track {
background: #f1f1f1;
border-radius: 5px;
}
div.custom-scroll::-webkit-scrollbar-thumb {
background: #c1c1c1;
border-radius: 5px;
}
跨浏览器兼容写法与 fallback 策略
没有统一 API，只能并行书写两套规则，并接受它们互不影响。关键不是“覆盖”，而是“各自生效”——Firefox 忽略 WebKit 伪类，Chrome 忽略 scrollbar-width，所以直接叠写即可。
容易踩的坑是试图用 @supports 检测 WebKit 支持，但目前无可靠媒体查询判断内核；更务实的做法是按需启用：
- 若只要隐藏滚动条但保留滚动能力：Firefox 用
scrollbar-width: none，WebKit 用::-webkit-scrollbar { display: none } - 若要保持滚动条存在但变细：Firefox 用
scrollbar-width: thin，WebKit 用width: 6px，但注意 thin 在 Firefox 中仍比 6px 宽，视觉不一致属正常 - 不要依赖滚动条样式做布局计算——它的尺寸不参与盒模型，
getBoundingClientRect()拿不到它的真实占位
移动端 Safari 和 iOS 滚动条的特殊限制
iOS 16+ 开始支持 ::-webkit-scrollbar，但仅限于 overflow: scroll 的容器，且默认滚动条始终半透明、无法完全自定义颜色以外的属性。更关键的是：Safari 移动端会忽略 scrollbar-width，只认 WebKit 规则。
实际开发中发现，即使写了完整伪类，在某些 iOS 版本上 thumb 的 border-radius 会被强制重置为 0，此时只能用 background-image: radial-gradient() 模拟圆角效果。
真正难处理的不是写法，而是当页面同时存在 body 滚动和局部容器滚动时，WebKit 伪类会全局污染——html::-webkit-scrollbar 会影响整个页面，而你可能只想改某个 div。这时候必须用足够具体的选择器隔离，比如 .chat-log::-webkit-scrollbar，而不是泛泛地写在 body 上。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
