Chrome和Edge可用::-webkit-scrollbar自定义滚动条样式，Firefox仅支持scrollbar-width和scrollbar-color，Safari/iOS不支持伪元素；跨浏览器推荐simplebar等JS库，但需注意移动端和macOS实际不可见。
Chrome 和 Edge 里用 ::-webkit-scrollbar 自定义滚动条
主流 Chromium 内核浏览器（Chrome、Edge、新版 Opera）支持原生伪元素控制滚动条样式，这是最直接、无需 JS 的方案。但注意它只在 WebKit/Blink 内核下生效，Firefox 和 Safari 完全不识别。
常见写法是组合使用以下伪元素：
-
::-webkit-scrollbar：整个滚动条容器（必须设width或height才可见） -
::-webkit-scrollbar-track：滑轨背景（可设border-radius、background） -
::-webkit-scrollbar-thumb：滑块本身（建议加border-radius和过渡效果） -
::-webkit-scrollbar-thumb:hover：悬停态（提升交互反馈）
示例（适配深色后台）：
::-webkit-scrollbar {
width: 8px;
}
::-webkit-scrollbar-track {
background: #2d3748;
border-radius: 4px;
}
::-webkit-scrollbar-thumb {
background: #4a5568;
border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
background: #718096;
}
别漏掉 ::-webkit-scrollbar 的尺寸声明——没设 width 或 height，后续样式全无效。
立即学习“前端免费学习笔记（深入）”；
Firefox 滚动条样式只能靠 scrollbar-width 和 scrollbar-color
Firefox 不支持伪元素，仅提供两个 CSS 属性，能力非常有限：只能控制宽度类型和颜色，不能圆角、不能加阴影、不能改 hover 效果。
scrollbar-width 取值只有 auto、thin、none；scrollbar-color 接收两个颜色值：thumb-color track-color。
用法示例（放在 body 或滚动容器上）：
body {
scrollbar-width: thin;
scrollbar-color: #718096 #2d3748;
}
注意：这两个属性对 macOS 上的 Firefox 无效（系统强制隐藏滚动条），且无法单独作用于某个 div，必须作用于有滚动行为的元素本身（比如设置了 overflow: auto 的 .main-content）。
需要跨浏览器统一？优先考虑轻量 JS 库而非重写
纯 CSS 方案在各浏览器间差异太大，如果后台要同时兼容 Chrome、Firefox、Safari（尤其是 macOS Safari 默认隐藏滚动条），硬靠 CSS 补齐几乎不可能。
推荐用 simplebar 这类库：它会自动检测原生滚动条是否可用，不可用时才注入自定义 DOM 结构，并保持原有滚动逻辑和事件兼容性。
接入要点：
- 引入
simplebar.css和simplebar.js（或通过 npm） - 给目标容器加
data-simplebar属性，或用 JS 初始化：new SimpleBar(document.querySelector('.sidebar')) - 自定义样式通过覆盖
.simplebar-scrollbar等类实现，比原生伪元素更可控
避坑提示：不要在 body 上直接用 simplebar，会导致页面整体滚动异常；只包裹具体需要美化滚动条的区域（如侧边栏、表格容器）。
移动端和 macOS 用户实际看不到自定义滚动条
iOS Safari 和 macOS Safari 默认隐藏滚动条（仅在滚动时短暂显示），且不支持 ::-webkit-scrollbar；Android Chrome 虽支持，但用户极少拖动滚动条，更多是惯性滑动。
这意味着：你在桌面 Chrome 里调得再精致的圆角滑块，在 iPhone 上根本不会出现；所有基于伪元素的样式优化，本质上只服务于 Windows/Linux 桌面端用户。
所以别为「视觉统一」强行加 JS 库——如果后台主要使用场景是 iPad 或 Mac，那默认滚动条行为反而是最自然的。真正该花时间优化的，是滚动性能（比如虚拟滚动长列表）和触控反馈（overscroll-behavior 防止页面被拖拽出界）。
