css 滚动条定制需分浏览器适配：chrome/edge 用成套 ::-webkit-scrollbar（须设 width/height 且绑定真实容器），firefox 仅支持 scrollbar-width 和 scrollbar-color，safari（尤其 ios）基本不支持任何样式。
不能靠一套 CSS 通吃所有浏览器，Chrome/Edge 要用成套 ::-webkit-scrollbar，Firefox 只认 scrollbar-width 和 scrollbar-color，Safari（尤其 iOS）基本不响应任何样式——硬写只会白忙活。
Chrome/Edge 中 ::-webkit-scrollbar 必须成套写且限定容器
单独加 ::-webkit-scrollbar-thumb 或只设 ::-webkit-scrollbar-track，滑块大概率不出现；漏掉 ::-webkit-scrollbar 自身的 width（垂直）或 height（水平），整套规则直接失效。
-
::-webkit-scrollbar必须显式设width: 8px（推荐 6–12px），不设等于没写 - 样式必须绑定到真实滚动容器上，比如
.chat-log { height: 400px; overflow-y: auto; }，再写.chat-log::-webkit-scrollbar，别往html或body上硬套 -
::-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会让轨道消失，但滑块仍可拖——用户失去参照，体验断裂 - 必须写在目标容器上，例如
.chat-log { scrollbar-width: thin; scrollbar-color: #666 #eee; }，写在* { }或html上无效
Safari（尤其是 iOS）基本不支持 CSS 滚动条定制
macOS Safari 16.4+ 才开始有限支持 scrollbar-width 和 scrollbar-color，但依然不认 ::-webkit-scrollbar；iOS Safari 直接忽略所有相关 CSS——这不是 bug，是苹果明确的设计策略。
- 系统级设置（如 macOS “自动隐藏滚动条”）会直接覆盖所有 CSS 设置，网页无权干预
-
::-webkit-scrollbar-thumb:hover和::-webkit-scrollbar-thumb:active在多数 Safari 版本里不触发 - 别依赖
scrollbar-width: thin在 Safari 上生效，实测多数版本当auto处理 - 如果设计强依赖圆角 + 悬停 + 全平台一致，JS 库（如 simplebar）是唯一可靠路径，但它会接管原生滚动逻辑，可能影响可访问性和手势惯性
最易被忽略的一点：滑块太小（比如 width: 4px）在触控设备上几乎无法操作，而 WebKit 对极小尺寸滑块有硬性渲染下限——设了也不显示。别为了“纤细”牺牲可用性。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
