原生滚动条美化无法真正通用，需分浏览器实现：WebKit用::-webkit-scrollbar（须设width/height、track和thumb的background-color等），Firefox仅支持scrollbar-width和scrollbar-color；不一致时应改用SimpleBar等JS库。
原生滚动条美化无法真正“通用”，必须分浏览器写两套规则：WebKit 系统用 ::-webkit-scrollbar 伪元素，Firefox 只认 scrollbar-width 和 scrollbar-color；Safari（尤其 macOS）和移动端限制更多，别指望完全一致。
Chrome / Edge / Safari（WebKit/Blink）必须成套写 ::-webkit-scrollbar
漏掉任意一个关键部分，整个自定义就失效——不是“轨道变了但滑块没变”，而是浏览器直接回退到默认样式。
-
::-webkit-scrollbar必须设width（垂直）或height（水平），建议 8–12px；设 4px 可能被强制拉高 -
::-webkit-scrollbar-track必须有background-color，否则轨道透明，和页面底色打架 -
::-webkit-scrollbar-thumb必须有background-color，否则滑块不可见；border-radius别超过高度一半（如 thumb 高 6px，radius ≤ 3px） -
::-webkit-scrollbar-thumb:hover单独写才生效，不能靠普通:hover作用于容器 - 这些伪元素只对设置了
overflow: auto或scroll且内容真实溢出的**具体容器**生效，写在html或body上基本无效
Firefox 只响应 scrollbar-width 和 scrollbar-color
它完全无视 ::-webkit-scrollbar，也不支持圆角、阴影、hover 状态等任何进阶样式。别写 ::-moz-scrollbar——这个伪类早被废弃，写了也白写。
-
scrollbar-width只接受auto、thin、none；其他值（比如10px）会被忽略 -
scrollbar-color格式固定：scrollbar-color: <thumb-color><track-color></track-color></thumb-color>，顺序反了就失效 -
scrollbar-color仅在scrollbar-width: thin或auto时起作用；设成none后颜色设置被忽略 - 这两个属性只对根滚动容器（
html或设置了overflow的块级元素）有效，对嵌套div滚动无效
隐藏滚动条但仍可滚动的写法要分浏览器处理
想“看不见但还能滚”，不能只靠 overflow: hidden——那会直接裁剪内容，不是隐藏滚动条。
- WebKit：用
.container::-webkit-scrollbar { display: none; }，前提是容器已设overflow-y: auto - Firefox：用
scrollbar-width: none（推荐）或scrollbar-color: transparent transparent（fallback） - 注意：
scrollbar-width: none在 Firefox 中用户无法拖动滑块，只能靠滚轮或键盘滚动；display: none在 WebKit 中行为一致 - 别用
visibility: hidden或opacity: 0去“藏”滚动条——它们不生效
需要强一致性时，放弃原生滚动条
如果你的设计要求滚动条宽度、颜色、圆角、hover 效果在 Chrome、Firefox、Safari 上完全一致，原生 CSS 方案做不到。这时候得用 JS 库接管。
-
simplebar是目前最轻量（~3.5KB gzip）、无依赖、自动适配 RTL 和触摸事件的选择 - 它把原生滚动容器替换成自绘 DOM 节点，样式完全可控，且保留原生滚动行为（如惯性、键盘导航）
- 代价是增加 JS 执行开销，且需确保初始化时机正确（比如容器尺寸变化后调用
SimpleBar.recalc()） - IE 完全不支持所有滚动条美化方案，现代项目可忽略；但若需支持旧版 Safari（
最容易被忽略的一点：移动端 Safari 对 ::-webkit-scrollbar 支持极弱，几乎不渲染自定义样式，且无法隐藏；此时要么接受原生表现，要么用 JS 库统一处理——别在移动设备上较真 CSS 滚动条。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
