统一滚动条样式仅对 webkit/blink 内核（chrome、safari、chromium版edge）有效；firefox 64+不支持自定义，仅能通过@supports检测并设scrollbar-width: thin/none；::-webkit-scrollbar需同时声明容器、滑块、轨道三部分才生效。
滚动条样式在 Chrome/Firefox/Edge 中怎么统一生效
只写 ::-webkit-scrollbar 在 Firefox 和新版 Edge（Chromium 内核）以外的环境会完全失效。Firefox 从 64 版本起彻底不支持任何自定义滚动条 API，只能靠禁用原生滚动 + 自实现（成本高），所以「统一美化」实际只对 WebKit/Blink 内核有效——也就是 Chrome、Safari、Edge（Chromium 版）。
实操建议：
- 先用
@supports (scrollbar-width: auto)检测 Firefox（仅支持thin或none两种预设） - 对 WebKit/Blink 使用
::-webkit-scrollbar系列伪元素控制外观 - 不要尝试用 JS 模拟滚动条来“兼容 Firefox”，除非你已准备好处理 focus、键盘导航、触摸拖拽、缩放适配等全部边缘行为
::-webkit-scrollbar 必须写的三部分才能显示
很多人写了 ::-webkit-scrollbar-track 却没效果，是因为 WebKit 要求至少声明三个基础部件：滚动条容器（::-webkit-scrollbar）、滑块（::-webkit-scrollbar-thumb）、轨道（
::-webkit-scrollbar-track）。缺任意一个，整个自定义就回退到默认样式。<p>最小可用代码示例：</p><pre class="brush:php;toolbar:false;">/* 容器宽度 */
::-webkit-scrollbar {
width: 8px;
}
/* 滑块 */
::-webkit-scrollbar-thumb {
background-color: #888;
border-radius: 4px;
}
/* 轨道 */
::-webkit-scrollbar-track {
background-color: #f1f1f1;
}注意：::-webkit-scrollbar
width / height 是必须设置的，否则滑块不渲染；background-color 在 thumb 上不能是 transparent，否则不可见。移动端 Safari 和 iOS 滚动条根本不可见，别白费劲
iOS/iPadOS 的 Safari 默认隐藏滚动条，且 ::-webkit-scrollbar 完全不触发——哪怕你在桌面 Safari 上调好了，一上真机就消失。这不是 bug，是 Apple 明确的设计策略：滚动条不是 UI 元素，而是系统手势反馈的一部分。
能做的只有两件事：
- 用
overflow: -webkit-scrolling-touch启用惯性滚动（仅限 iOS 5+） - 通过
scroll-behavior: smooth或 JS 滚动动画提升体验，但无法让滚动条“出现” - 如果业务强依赖滚动位置提示（比如长表单进度），改用顶部进度条或分步指示器，而不是硬扛滚动条
深色模式下滚动条颜色容易翻车，记得加媒体查询
滚动条颜色不会自动响应 prefers-color-scheme，比如你在深色背景上用了浅色 thumb，用户切到深色模式后可能变成灰底+深灰滑块，几乎看不见。
稳妥做法是显式覆盖：
@media (prefers-color-scheme: dark) {
::-webkit-scrollbar-thumb {
background-color: #555;
}
::-webkit-scrollbar-track {
background-color: #222;
}
}
更关键的是：不要只依赖系统色值（如 color-scheme: dark 声明），它对 ::-webkit-scrollbar 无影响；所有颜色必须手动重写。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
