chrome/edge中::-webkit-scrollbar必须成套设置且显式声明width/height才生效，firefox仅支持scrollbar-width和scrollbar-color两个属性，safari基本不支持css定制，需按内核分层兜底。
Chrome/Edge里::-webkit-scrollbar必须成套写才生效
单独加 ::-webkit-scrollbar-thumb 或只设 ::-webkit-scrollbar-track，样式大概率不出现——它不是“可选配”，而是整条链依赖关系。漏掉 ::-webkit-scrollbar 自身的 width（垂直）或 height（水平），整个伪元素链就失效。
-
::-webkit-scrollbar必须显式设width: 8px（推荐 6–10px），不设等于没写 -
::-webkit-scrollbar-track建议加background和border-radius，但别用box-shadow（不渲染） -
::-webkit-scrollbar-thumb的background是刚需，不设就是透明；border-radius别超滑块宽高一半，比如width: 6px时设border-radius: 4px会错位 - 悬停状态必须用
::-webkit-scrollbar-thumb:hover单独写，对父容器加:hover没反应
Firefox只认scrollbar-width和scrollbar-color，且作用域很窄
这两个属性完全无视所有 ::-webkit- 规则，也**不支持圆角、渐变、阴影或 hover 效果**。更关键的是：它们只对“触发滚动的块级元素”生效，不是全局开关。
-
scrollbar-width只有三个值：auto、thin、none；没有像素控制，“thin” 是唯一可调粗细的选项 -
scrollbar-color: #666 #eee顺序不能反，第二个是轨道色；设成transparent会让轨道消失但滑块仍可拖——体验断裂，别这么干 - 写在
* { ... }上看似省事，但实际只影响根滚动容器（html）或显式设了overflow: auto的块级元素（如.chat-history） - 对嵌套的
div滚动容器无效，除非该div真正触发了滚动上下文（固定高 +overflow-y: auto）
Safari（尤其macOS/iOS）基本不能靠CSS硬控
Safari 16.4+ 才开始有限支持 scrollbar-width 和 scrollbar-color，但依然不认 ::-webkit-scrollbar——同属 WebKit 内核却行为割裂。系统级策略更致命：macOS 若开启“自动隐藏滚动条”，所有 CSS 设置直接被无视。
- 别给 Safari 写
::-webkit-scrollbar-thumb:active，它根本不触发 -
scrollbar-width: thin在多数 Safari 版本里实测当auto处理，不可信 -
::-webkit-scrollbar-corner和::-webkit-scrollbar-button在 macOS Safari 上基本被忽略 - 真要统一外观，要么降级为默认样式，要么用
@supports (-webkit-appearance: none)做特性检测后切换 JS 方案（如 simplebar）
局部容器自定义滚动条的常见塌陷与失效
把 ::-webkit-scrollbar 套在 .list-container 下看似精准，但容易因继承链断裂、渲染优化或怪异模式导致“样式写了却看不见”。
- 若容器用了
transform或will-change，部分旧版 Chrome 会禁用其内部滚动条伪元素渲染 - 在 Shadow DOM 内部写
::-webkit-scrollbar默认不生效，需用:host ::-webkit-scrollbar显式穿透 - HTML 开头若有 BOM 或空格，IE/Edge 进入 Quirks Mode，
padding/border计算错乱，视觉像“结构塌陷”，但根源是盒模型异常 - 父容器没设明确
height或width，overflow: auto在 IE6/7 下可能完全不触发，内容溢出不可见
真正麻烦的不是写几行 CSS，而是同一套规则在不同内核下要么被忽略、要么被截断、要么被系统策略覆盖。跨浏览器滚动条定制从来不是“一次写完就跑通”，而是得按浏览器分层兜底——WebKit 用伪元素链，Firefox 用两个属性开关，Safari 基本放弃 CSS 控制，转而接受系统原生或引入 JS 接管。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
