结论：纯CSS无法全浏览器统一滚动条样式，需分层兜底；Chrome/Edge/Safari依赖::-webkit-scrollbar整套声明且需显式设宽高，Firefox仅支持scrollbar-width/scrollbar-color，Safari支持有限且受系统策略干扰，内容挤占需用padding/margin或内层容器预留空间。
直接说结论：只靠 CSS 实现全浏览器一致的滚动条样式是不可能的，但可以做到「视觉可接受、行为可靠、不破布局」——关键不是强行统一，而是分层兜底、按需启用。
Chrome/Edge/Safari 必须成套写 ::-webkit-scrollbar
单独加 ::-webkit-scrollbar-thumb 或只设 ::-webkit-scrollbar-track，样式大概率不出现。它不是“可选配”，而是整条链依赖关系。
-
::-webkit-scrollbar必须显式声明width（垂直滚动）或height（水平滚动），推荐6px–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 设置直接被无视
-
scrollbar-width: thin在多数 Safari 版本里实测当auto处理，不可信 -
::-webkit-scrollbar-corner和::-webkit-scrollbar-button在 macOS Safari 上基本被忽略 - 真要统一外观，要么降级为默认样式，要么用
@supports (-webkit-appearance: none)做特性检测后切换 JS 方案（如simplebar）
滚动条出现时内容被挤走？先解决占位问题
滚动条不是浮在内容上，它会侵占容器的内联空间，导致内容重排。这不是样式问题，是盒模型问题。
- Windows 下滚动条宽度通常为
17px（Chrome）、12px（Firefox），macOS 默认隐藏，Safari 不稳定 - 不要用
overflow: overlay（已废弃且 IE/旧 Edge 不支持） - 推荐方案：给滚动容器加
padding-right: 17px，再用margin-right: -17px抵消，同时设box-sizing: border-box - 或者用内层容器法：
.inner { width: calc(100% + 17px); }，让内容区预留出滚动条空间
最常被忽略的一点：滚动条样式不是“写了就生效”，而是“写了且容器满足滚动条件才生效”。很多失效案例，其实只是忘了给容器设 height 和 overflow-y: auto —— 光写伪元素，不触发滚动上下文，等于白写。
