Firefox仅支持scrollbar-width和scrollbar-color，必须写在:root或html上才生效；Chrome/Edge/Safari仅支持::-webkit-scrollbar，需作用于html元素且至少包含scrollbar、track、thumb三部分规则。
Firefox只认scrollbar-width和scrollbar-color，别写::-webkit-scrollbar
Firefox完全忽略::-webkit-scrollbar系列规则，哪怕你写了全套伪元素，它也当没看见。它只响应两个标准属性：scrollbar-width（仅接受auto、thin、none）和scrollbar-color（必须是两个颜色值，顺序为thumb track）。这两个属性必须作用在根元素上才全局生效——写在body或某个.container里无效。
-
scrollbar-width: thin在Firefox 97+才支持，旧版会回退到auto，无法强制设为固定像素值 -
scrollbar-color: #666 #f0f0f0中第一个是滑块色，第二个是轨道色；不能用var(--primary)，CSS变量在这里不被解析 - 想让Firefox滚动条“看起来细”，只能靠
scrollbar-width: thin，而不是试图用::-webkit-scrollbar { width: 6px }去影响它
Chrome/Edge必须用html而非body写::-webkit-scrollbar
给body加::-webkit-scrollbar经常没反应，因为页面级滚动容器实际是html元素（document.documentElement）。Chrome/Safari对html::-webkit-scrollbar支持最稳定，body在部分Safari版本中会失效。
- 最小可用组合至少包含三部分：
html::-webkit-scrollbar（设width）、html::-webkit-scrollbar-track（设background）、html::-webkit-scrollbar-thumb（必须设background-color，否则透明不可见） -
border-radius: 999px比4px更可靠——滑块高度动态变化，固定像素圆角容易被裁切 - 避免用
::-webkit-scrollbar-button或::-webkit-scrollbar-corner，它们触发渲染异常的概率高，且无实际设计价值
同时写两套规则不会冲突，但:root和html要分开用
WebKit规则和Firefox规则互不干扰，浏览器各自按能力解析。但作用域必须区分开：Firefox的scrollbar-width和scrollbar-color应写在:root（或html），而WebKit伪元素必须写在html（不是:root）。
- 错误写法：
:root::-webkit-scrollbar { width: 8px }——:root不支持伪元素选择器 - 正确结构示例：
:root { scrollbar-width: thin; scrollbar-color: #777 #f5f5f5; } html::-webkit-scrollbar { width: 8px; } html::-webkit-scrollbar-track { background: #f5f5f5; } html::-webkit-scrollbar-thumb { background: #777; border-radius: 999px; } - 不要把
scrollbar-color值硬套进WebKit规则里——比如html::-webkit-scrollbar-thumb { background: var(--scroll-thumb) }可行，但scrollbar-color: var(--scroll-thumb)一定失败
移动端隐藏滚动条时，scrollbar-width: none比display: none更安全
在移动端（尤其是iOS Safari），用::-webkit-scrollbar { display: none }可能导致滚动行为卡顿或scrollIntoView()错位。Firefox的scrollbar-width: none是标准方案，它隐藏视觉但保留滚动能力，且不干扰事件流。
立即学习“前端免费学习笔记（深入）”；
- 只对需要隐藏的容器单独设置，比如
.modal-content { scrollbar-width: none; }，别全局滥用 - 若需兼容老版Firefox（scrollbar-width: none仍有效，但
thin会被忽略 - 隐藏后务必测试触屏拖动是否灵敏——有些设备在
scrollbar-width: none下仍会短暂闪现原生滑块，属正常渲染行为，无需强行覆盖
thin这个模糊概念，两者永远做不到“完全一样粗”。接受这个限制，比花时间 hack 更实际。 
