firefox仅支持scrollbar-color和scrollbar-width，需成对使用且顺序固定；webkit浏览器必须用::-webkit-scrollbar伪元素；两套规则可共存但须精准作用于触发滚动的容器。
Firefox 用 scrollbar-color 和 scrollbar-width 最简生效
Firefox（v64+）只认这两个属性，其他浏览器完全忽略——写了也不报错，但开发者工具里会标成灰色无效声明。常见错误是调了颜色没变化，结果发现根本没开 Firefox 测试。
必须成对出现，且顺序固定：scrollbar-color: #ff6b6b #f8f9fa 中第一个是滑块（thumb），第二个是轨道（track）。不支持 rgba()、transparent、渐变或 currentcolor，用了就退回到默认灰滑块。
scrollbar-width 只有三个值：auto（默认）、thin（窄）、none（隐藏但仍可滚动），没有像素单位，也不能设为 6px 这类值。
作用对象是设置了 overflow: auto 或 scroll 的元素本身，比如 .chat-log、textarea，不是父容器。
Chrome/Safari/Edge 必须用 ::-webkit-scrollbar 系列伪元素
WebKit 内核浏览器完全不识别 scrollbar-color，唯一可靠路径就是整套 ::-webkit-scrollbar 伪元素。漏掉 ::-webkit-scrollbar 的 width 或 height，滚动条可能直接消失或不可拖动。
关键点：
-
::-webkit-scrollbar必须先定义宽高（纵向看width，横向看height），建议 ≥ 6px，macOS 下小于该值常被忽略 -
::-webkit-scrollbar-thumb必须设background，否则透明不可见；可加border-radius和:hover状态 -
::-webkit-scrollbar-track别加border或box-shadow，某些 Chrome 版本会错位 - 样式只作用于实际触发滚动的容器本身，比如
.modal-body::-webkit-scrollbar，写成.modal::-webkit-scrollbar无效
两套规则可以共存，但别混用同一选择器
你可以同时写 scrollbar-color 和 ::-webkit-scrollbar，Firefox 自动取前者，Chrome 自动取后者，互不干扰。不需要 @supports 检测。
但要注意：不要把 ::-webkit-scrollbar 写在全局 body 或 html 上，否则会污染所有可滚动区域（比如 select 下拉、textarea、弹窗内的列表），应精确到具体容器，例如：
.article-content {
overflow-y: auto;
scrollbar-color: #4a5568 #edf2f7;
scrollbar-width: thin;
}
.article-content::-webkit-scrollbar {
width: 8px;
}
.article-content::-webkit-scrollbar-thumb {
background-color: #4a5568;
border-radius: 4px;
}
.article-content::-webkit-scrollbar-track {
background-color: #edf2f7;
}
容易被忽略的触发条件和兼容性陷阱
滚动条样式不会凭空生效。容器必须同时满足三个硬条件：
- 有明确的
height或max-height（不能是auto或百分比未撑开） - 子内容真实溢出（
scrollHeight > clientHeight），光写overflow: auto不够 - 必须是自身触发滚动，不是靠父级溢出“透传”出来的滚动条
另外，::-webkit-scrollbar-corner 和 ::-webkit-resizer 在现代项目中极少需要定制，强行加反而容易在双滚动条交汇处引发布局偏移，除非你明确控制表格或可缩放面板。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
