目前没有真正跨端一致的纯CSS方案统一滚动条外观，因::-webkit-scrollbar仅WebKit/Blink支持，Firefox用scrollbar-width/color，Safari支持有限且需系统开启；scrollbar-gutter仅预留空间防抖动，不改样式。
原生 ::-webkit-scrollbar 无法跨浏览器生效，scrollbar-gutter 只控制留白不改样式——想“统一滚动条外观”，目前没有真正跨端一致的纯 CSS 方案。
为什么 ::-webkit-scrollbar 在 Firefox 和 Safari 上完全失效
这是 WebKit/Blink 专属伪元素，Firefox 使用自己的 scrollbar-width 和 scrollbar-color（仅限于颜色和粗细），Safari 自 17.4 起才有限支持部分 ::-webkit-scrollbar 规则（且默认禁用，需用户开启“显示滚动条”系统偏好）。你写的 ::-webkit-scrollbar-track 或 ::-webkit-scrollbar-thumb:hover 在 Firefox 中会被直接忽略，连报错都不会有。
-
::-webkit-scrollbar不是标准 CSS，W3C 未采纳 - Firefox 仅认
scrollbar-width: thin | auto | none和scrollbar-color: <color><track-color></track-color></color> - Safari 对 hover、active 等交互状态伪类支持极不稳定，常被降级为静态样式
scrollbar-gutter 是什么？它根本不是用来“美化”的
scrollbar-gutter 的唯一作用是预留滚动条空间，防止内容因滚动条出现/消失而重排（即“抖动”）。它不绘制任何视觉元素，也不影响颜色、圆角、宽度等样式属性。设成 scrollbar-gutter: stable both 后，即使滚动条隐藏，容器右侧仍保留空白，但那个空白区域依然是“不可见、不可点击、不可自定义”的。
- 合法值只有
auto、stable、stable both、stable track - 它和
overflow: overlay（已废弃）逻辑相反：后者隐藏滚动条但不腾空间，前者显式腾空间但不碰样式 - 搭配
overflow: auto使用才有意义；单独写对视觉无任何改变
实际项目中怎么取舍：按目标分场景处理
如果你的目标是“视觉统一”，必须接受妥协：要么放弃 Firefox/Safari 的精细控制，要么引入 JS 驱动的自定义滚动条库（如 simplebar 或 overlay-scrollbars）。纯 CSS 下只能做分层适配：
立即学习“前端免费学习笔记（深入）”；
- WebKit/Blink（Chrome/Edge/Safari 新版）：用
::-webkit-scrollbar全套规则定义 thumb、track、corner - Firefox：只加
scrollbar-color: #666 #f0f0f0+scrollbar-width: thin，其余无视 - 防抖动：全局加
* { scrollbar-gutter: stable both }（注意性能，慎用于高频重绘区域） - 需要 hover 效果？在 Firefox 中只能靠 JS 模拟（监听
mouseenter动态加 class 控制背景色）
真正麻烦的不是写法，而是用户系统设置——macOS 默认“仅在滚动时显示滚动条”，Windows 默认始终显示，而 Safari 还会读取系统“减少运动”偏好来禁用所有过渡动画。这些都会让同一段 CSS 表现出完全不同行为。
