不能只写::-webkit-scrollbar，必须分层覆盖chrome/edge/safari与firefox；firefox因引擎隔离不解析任何::-webkit-*伪元素，仅支持scrollbar-width和scrollbar-color；safari 16.4+有限支持::scrollbar-thumb，ios safari则完全忽略所有滚动条css。
直接结论：不能只写 ::-webkit-scrollbar，必须分层覆盖 Chrome/Edge/Safari + Firefox，Safari 16.4+ 之后才开始有限支持标准伪类，iOS Safari 滚动条默认不可见，靠 CSS 无法激活。
为什么 ::-webkit-scrollbar 在 Firefox 里完全不生效
Firefox 从 64+ 版本起彻底弃用 WebKit 前缀伪元素，它只认 W3C 标准属性 scrollbar-width 和 scrollbar-color。这不是“兼容性差”，而是引擎级隔离——Gecko 渲染管线压根不解析 ::-webkit-* 这类选择器。
常见错误现象：
- 只写了
::-webkit-scrollbar-thumb，结果 Firefox 里滚动条又粗又灰，还带箭头按钮 - 在
@supports (scrollbar-width: thin)里漏了scrollbar-color，导致颜色没变，只有宽度收缩
实操建议：
- 必须把
scrollbar-width和scrollbar-color同时加在目标容器上（如html或带overflow: auto的div） - 这两个属性对
textarea和 iframe 内部滚动无效，iframe 需单独在其文档内设置 - 不要给
scrollbar-color的第二个参数（track 色）设透明色，部分 Firefox 版本会回退到系统默认轨道
::-webkit-scrollbar 四个伪元素一个都不能少
很多人只写 ::-webkit-scrollbar 和 ::-webkit-scrollbar-thumb，结果滚动条轨道发白、右下角出现刺眼白块，或者滑块悬停无反馈——这是因为 WebKit 渲染时按优先级逐层命中，漏掉任意一层，就会 fallback 到 UA 样式。
真正起作用的四个核心伪元素是：
规划您的迪拜之旅 — 哈利法塔观景、沙漠探险、迪拜购物中心购物、棕榈岛度假村及黄金市场砍价。还提供支持...
-
::-webkit-scrollbar：设width/height，不设背景色（否则盖住轨道） -
::-webkit-scrollbar-track：必须声明，哪怕只是background: transparent，否则轨道留白 -
::-webkit-scrollbar-thumb：滑块主体，加border-radius和background，避免纯色硬边 -
::-webkit-scrollbar-corner：同时有水平+垂直滚动时右下角区域，深色背景必设，否则显白
注意：::-webkit-scrollbar-track-piece 和 ::-webkit-scrollbar-button 可选，但一旦用了就必须配齐，否则某些 Edge 版本会出现轨道断层。
Safari 16.4+ 开始支持 ::scrollbar-thumb，但别急着切
Safari 16.4 确实加入了实验性支持 ::scrollbar-thumb 等标准伪类，但它目前只响应 background 和 border-radius，不支持 box-shadow、transition，且无法控制轨道或角落。
实操建议：
- 不要用
@supports selector(::scrollbar-thumb)去替换 WebKit 规则——覆盖率太低，旧版 Safari 占比仍高 - 若坚持尝试，需把标准伪类写在 WebKit 规则之后，靠层叠覆盖，而不是替代
-
::-webkit-scrollbar-thumb:hover的transition在 Safari 15–16.3 中基本无效，改用background: linear-gradient()模拟悬停变色更稳
布局跳动和移动端隐藏是两个独立问题，别混在一起解决
桌面端滚动条显示导致内容左移，本质是滚动条侵占容器内宽；而 iOS Safari 默认隐藏滚动条，是系统级行为，CSS 无法强制唤出。
关键区分点：
- 布局跳动用
scrollbar-gutter: stable解决，它为滚动条预留空间，Chrome/Firefox/Safari 17+ 已支持，无需 JS - iOS Safari 滚动条不可见是设计使然，
::-webkit-scrollbar规则会被解析但不渲染，连scrollbar-gutter都不触发 - 想在 iOS 上“模拟可见”，只能用 JS 拦截 touch 事件 + 自绘滚动条，代价是失去原生惯性滚动和性能
最容易被忽略的是：Firefox 的 scrollbar-width: thin 不等于“细滚动条”，它只是告诉浏览器“用最小策略渲染”，实际宽度仍由 UA 决定，且无法进一步压缩——这点和 WebKit 的 width: 6px 有本质区别。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
