滚动条整体背景无法用background一键设置，需通过::-webkit-scrollbar-track等伪元素分别定制，Chrome/Edge和Safari支持该系列伪类，Firefox完全不支持，只能用JS模拟滚动容器。
滚动条整体背景怎么用CSS控制
滚动条整体背景不能靠 background 一键设置，必须通过伪元素分别定制轨道（track）和滑块（thumb），且不同浏览器前缀和结构差异极大。Chrome/Edge（Blink）和 Safari（WebKit）都支持 ::-webkit-scrollbar 系列伪类，Firefox 完全不支持——这点最容易被忽略。
Chrome/Edge里改滚动条轨道背景的写法
轨道（即滑块上下/左右的空白区域）背景由 ::-webkit-scrollbar-track 控制。它默认是透明的，直接设 background 即可，但要注意：如果父容器有背景色或图片，而这里没显式设背景，就会透出底层内容，看起来像“没生效”。
-
::-webkit-scrollbar-track必须搭配border-radius和background才能看清效果，单独设background-color: #f0f0f0最稳妥 - 不要依赖
box-shadow或渐变来模拟“立体感”，部分旧版 Chromium 渲染异常 - 若容器设置了
overflow: overlay（已废弃），伪元素可能不触发，改用overflow: auto
Safari下滚动条背景为什么有时不显示
Safari 16.4+ 才开始支持 ::-webkit-scrollbar，且默认启用“滚动条自动隐藏”策略。即使写了 ::-webkit-scrollbar-track { background: #e0e0e0 }，只要页面没触发滚动行为（比如内容刚好不溢出），轨道就不会渲染，背景自然看不到。
- 测试时务必确保容器内高度 > 外部高度，否则伪元素根本不挂载
- Safari 对
background-image支持不稳定，优先用纯色background-color - 没有
::-webkit-scrollbar-track-piece这种写法，那是老式 WebKit 的遗留物，现代 Safari 已忽略
Firefox完全不支持怎么办
Firefox 没有任何原生 CSS 伪类能修改滚动条背景，::scrollbar-track 是草案，至今未实现。唯一可行路径是用 JavaScript 模拟滚动容器（如 overflow: hidden + 自定义 div + scrollTop 控制），但代价是失去原生滚动性能、惯性、触摸板平滑度和键盘导航支持。
立即学习“前端免费学习笔记（深入）”；
- 若项目必须兼容 Firefox，建议放弃“全局滚动条美化”，只对关键区域（如代码预览框）做 JS 滚动模拟
- 用
@supports selector(::-webkit-scrollbar)做特性检测，避免把 WebKit 样式污染到 Firefox - 别试图用
-moz-appearance: none强行覆盖——它在 Firefox 中无效
真正麻烦的不是写几行 CSS，而是得同时应付 Blink 的伪元素规则、WebKit 的版本断层、Firefox 的彻底缺席，以及移动端 Safari 那套更保守的渲染逻辑。动手前先查目标浏览器的实际支持表，比调样式花的时间还多。
