::-webkit-scrollbar 的 width 控制垂直滚动条粗细，height 控制水平滚动条厚度；二者缺一不可，否则伪元素链失效；推荐值6–12px，低于4px会被浏览器强制拉高。
::-webkit-scrollbar 的 width 和 height 到底控制什么
垂直滚动条的粗细由 ::-webkit-scrollbar { width: 8px; } 控制，水平滚动条的“厚度”则必须用 height，不是笔误——这是 WebKit 内核的硬性约定。设 ::-webkit-scrollbar { width: 0; height: 6px; } 就能隐藏垂直条、只留水平条。
漏掉 width 或 height，整个伪元素链直接失效，滑块、轨道全不渲染。推荐值范围是 6–12px；低于 4px 时，Chrome/Edge 会强制拉高以保证可操作性（尤其触控设备）。
-
width只影响垂直滚动条，对水平方向无作用 -
height只影响水平滚动条，设在垂直容器上不会让滑块变“厚” - 不写
width却写了::-webkit-scrollbar-thumb，样式大概率白写
scrollbar-color 的两个颜色参数顺序不能错
scrollbar-color: #666 #eee 是唯一合法顺序：第一个是滑块色，第二个是轨道色。写成 scrollbar-color: #eee #666，Firefox 就把轨道当滑块、滑块回退默认灰，看起来像“全乱了”。
第二个参数（轨道色）设 transparent 会导致轨道视觉消失，但滑块仍可拖动——用户失去参照物，拖动体验断裂。这个值在所有主流版本中都被静默降级为默认色，不是预期行为。
- 不支持
rgba()、渐变、CSS 变量（var(--x)） - 必须写在真正触发滚动的容器上，比如
.chat-log，不能写在父级或html上 - 写在
.chat-log::-webkit-scrollbar里会被浏览器直接忽略——伪元素不支持该属性
为什么 ::-webkit-scrollbar-thumb:hover 没反应
悬停效果只能靠 ::-webkit-scrollbar-thumb:hover 单独声明，对父容器加 :hover 完全无效。Safari（尤其 iOS）直到 16.4+ 才开始有限支持该伪类，macOS Safari 多数版本根本不触发 :hover 和 :active。
更隐蔽的问题是：如果 ::-webkit-scrollbar-thumb 没设 background，那它本身就是透明的，悬停再怎么写也看不见——background 是刚需，不是可选项。
- 别给
thumb加transition：Safari 不支持，Chrome 虽支持但动画常卡顿 -
border-radius别超滑块宽高一半，例如height: 6px时设border-radius: 4px会被裁切错位 - 某些 UI 框架（如 Ant Design）重置 CSS 会把
::-webkit-scrollbar设为display: none，得用!important覆盖
scrollbar-width: thin 在 Safari 上基本不可信
scrollbar-width: thin 在 Firefox 中稳定生效，但在 Safari（包括 macOS 和 iOS）实测多数版本直接当 auto 处理，滚动条宽度毫无变化。这不是缓存或写法问题，是内核支持度断层。
iOS Safari 从 16.4 开始才“有限支持” scrollbar-width 和 scrollbar-color，且依然无视所有 ::-webkit-scrollbar 规则——同属 WebKit 却行为割裂。更致命的是：macOS 系统若开启“自动隐藏滚动条”，所有 CSS 设置都会被系统策略覆盖，前端完全无法干预。
- 不要依赖
scrollbar-width实现圆角或悬停效果：Safari 不支持这些扩展能力 - 深色模式切换不能靠
@media (prefers-color-scheme: dark)包裹整套规则，得手动重复两套颜色声明 - 真要跨平台统一外观，JS 方案（如 simplebar）是唯一路径，但它会接管原生滚动逻辑，影响性能和可访问性
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
