body::-webkit-scrollbar 是唯一可靠的全局页面滚动条样式写法，因伪元素需真实滚动触发且各浏览器兼容性差异大，需结合 !important、降级方案及深色模式多套规则适配。
body 上必须挂载 ::-webkit-scrollbar 规则
页面级滚动条只属于 body（极少数旧 Safari 对 html 支持不稳定），直接写 ::-webkit-scrollbar 而不加父选择器，样式不会生效。很多人以为写在全局 CSS 里就能生效，结果调试半天发现没反应。
-
body::-webkit-scrollbar是唯一可靠的全局作用域写法 - 用
.container::-webkit-scrollbar只影响该容器内局部滚动，不是页面主滚动条 - 如果用了 UI 框架（如 Ant Design）或重置 CSS（如 Normalize.css），它们可能把
::-webkit-scrollbar设为display: none，得加!important覆盖（虽不优雅，但有时绕不开）
scrollbar-color 和 scrollbar-width 不支持 CSS 变量
这两个标准属性看着简洁，但硬伤是无法动态绑定 var(--color)。浏览器遇到非法值直接忽略，回退到默认样式——你写成 scrollbar-color: var(--thumb) var(--track)，等于没写。
- Firefox 只认
scrollbar-color和scrollbar-width，且scrollbar-width仅支持auto/thin/none - 想统一控制颜色/宽度，只能靠
:root定义变量，再在每个::-webkit-scrollbar-track、::-webkit-scrollbar-thumb里手动引用 - 构建时用 Sass/Less 替换变量，或运行时 JS 注入 style 标签，是更实际的“变量驱动”方案
伪元素必须配合真实滚动才能触发
写了 ::-webkit-scrollbar-thumb { background: #6c63ff } 却看不见滑块？大概率是容器根本没产生滚动——伪元素不会凭空渲染，它依赖真实的 overflow 行为。
- 检查目标元素是否设置了
overflow-y: auto或scroll，且子内容高度/宽度确实超出容器 - 常见陷阱：父容器没设
height，子元素用flex: 1却没撑开，导致overflow不生效 - 用 DevTools 的 Computed 面板搜
overflowY，确认值是auto或scroll；再搜scrollbar看伪元素样式是否被覆盖
iOS Safari 和 Firefox 的兼容性边界要心里有数
别指望一套 CSS 在所有环境都一模一样。iOS Safari 对 ::-webkit-scrollbar 的支持直到 iOS 16+ 才开始有限放开，而 Firefox 从 v100 起只认 scrollbar-color 和 scrollbar-width，对 ::-webkit-scrollbar-thumb 等伪元素仅部分支持（仅 track 和 thumb，不支持 button 或 corner）。
- 移动端优先项目，建议把
::-webkit-scrollbar当作增强而非必需，降级后保留原生滚动体验 - 需要强一致性的场景（比如设计系统组件库），得考虑引入
perfect-scrollbar或OverlayScrollbars这类 JS 方案 - 深色模式适配不能靠
@media (prefers-color-scheme: dark)直接套在伪元素上——得分别写两套规则，或用 JS 切换 class
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
