必须分两套写：Firefox用scrollbar-color（仅64+支持，需两个颜色值且顺序固定），Chrome/Edge/Safari用::-webkit-scrollbar三部分伪元素（必须全写，缺一不可）；iOS Safari不支持任何自定义。
滚动条颜色没法用一个通用 CSS 属性统一控制，必须按浏览器分两套写：Firefox 用 scrollbar-color，Chrome/Edge/Safari 必须用 ::-webkit-scrollbar 系列伪元素——漏掉任一环节，样式就失效。
Firefox 里怎么写 scrollbar-color 才生效
这个属性只在 Firefox 64+ 里认，Chrome、Edge、Safari 完全不解析它，写了也白写。
-
scrollbar-color必须写两个颜色值：<thumb-color></thumb-color><track-color></track-color>，顺序不能反；只写一个或写成scrollbar-color: #6c5ce7;就静默失效 - 不支持
transparent、rgba()或渐变，Firefox 当前会直接退回到默认灰滑块 - 作用范围是根滚动容器（
html）或设置了overflow: auto/scroll的块级元素，比如div或textarea - 如果轨道色和容器背景色太接近（比如都设成
#ffffff），滑块会“消失”，但实际仍可拖动
Chrome/Edge/Safari 必须用 ::-webkit-scrollbar 全套写法
这套伪元素只在 WebKit/Blink 内核浏览器生效，Firefox 完全忽略，写了也没反应。
Chrome Mcp
下载
通过 Chrome DevTools MCP 控制本机 Chrome 浏览器（保留已登录会话）。适用场景：浏览读取任意网页内容；操作 X (Twitter)：浏览动态、发推文、转帖、点赞、删帖；操作任何需登录网站（保留登录状态）；网页截图、读取页面结构、执行 JS 脚本。
- 必须同时声明三部分：
::-webkit-scrollbar（设宽高）、::-webkit-scrollbar-track（轨道）、::-webkit-scrollbar-thumb（滑块）；漏掉任意一个，样式大概率回退到系统默认 -
::-webkit-scrollbar必须显式设置width（垂直滚动）或height（水平滚动），否则整个滚动条不可见 -
::-webkit-scrollbar-thumb至少要设background-color和border-radius，不然就是一根难看的直角灰柱子 - 伪元素只对有滚动行为的容器生效——目标元素得有
overflow: auto或scroll，且父容器高度固定（不能是height: auto）
为什么写了没效果？常见踩坑点
不是代码错，而是环境没配对或条件没满足。
立即学习“前端免费学习笔记（深入）”；
- 在 Chrome 里检查
scrollbar-color是否生效？不用查——它压根不识别，开发者工具里这行会被标为“无效声明” - 写了
body::-webkit-scrollbar却没反应？Safari 对body上的伪元素支持极差，建议套一层div容器并加 class 控制 - 移动端 Safari 不支持
::-webkit-scrollbar，iOS 上滚动条始终是系统原生样式，无法自定义 - 滚动容器没触发滚动行为：内容高度没超过容器高度、
overflow没设对、父级display: flex之类布局干扰了高度计算
真正麻烦的是：两套写法互不兼容，必须共存、分别测试，而且 iOS Safari 这个缺口目前无解——能做的只有接受它不支持，别在那儿白耗时间调样式。
