::-webkit-scrollbar仅在WebKit/Blink内核浏览器生效，Firefox等不支持；需配合track、thumb等伪元素使用，且容器必须有overflow滚动行为；跨浏览器一致需JavaScript方案。
滚动条样式只在 WebKit 内核浏览器生效
::-webkit-scrollbar 是一个非标准伪元素，仅被 Chrome、Edge（Chromium 版）、Safari 等基于 WebKit/Blink 的浏览器识别。Firefox 和旧版 Edge（EdgeHTML）完全不支持，也不会回退到默认样式以外的任何效果——也就是说，你在 Firefox 里写一堆 ::-webkit-scrollbar 规则，它会直接忽略，连报错都不会有。
如果你需要跨浏览器一致的滚动条体验，必须接受：纯 CSS 方案无法覆盖所有浏览器。可行路径只有两个：放弃自定义，或用 JavaScript 模拟滚动容器（如 simplebar、overlay-scrollbars）。
::-webkit-scrollbar 的最小必要选择器组合
单独写 ::-webkit-scrollbar 不会生效，它必须配合其他伪元素一起使用，且需满足“父容器有滚动行为”这一前提（即 overflow: auto 或 scroll）。常用组合如下：
-
::-webkit-scrollbar：控制整个滚动条的宽高（横/纵方向） -
::-webkit-scrollbar-track：滚动条轨道背景（可设background、border-radius） -
::-webkit-scrollbar-thumb：拖动滑块（必须设background，否则不可见） -
::-webkit-scrollbar-thumb:hover：鼠标悬停时的滑块样式（可选）
注意：::-webkit-scrollbar-corner 用于右下角交汇处，但多数场景无需设置；漏掉 track 或 thumb 中任意一个，滚动条可能显示异常（比如滑块消失、轨道变黑）。
立即学习“前端免费学习笔记（深入）”；
常见失效原因与修复方式
即使语法正确，::-webkit-scrollbar 也常因以下原因不生效：
- 目标元素没有显式设置
overflow-x或overflow-y（仅靠overflow: auto在某些嵌套结构中不可靠） - 父级设置了
overscroll-behavior: contain或none，意外抑制了滚动行为 - CSS 优先级被更高权重的选择器覆盖（例如用了
!important的全局重置规则） - 在 Shadow DOM 内部未正确穿透作用域（需用
:host ::-webkit-scrollbar等方式）
调试建议：打开 Chrome DevTools → Elements 面板 → 找到滚动容器 → 在 Styles 面板中手动输入 ::-webkit-scrollbar，看是否出现可编辑的伪元素样式栏。不出现，说明选择器未命中或容器无滚动能力。
一个可用的最小化示例
以下代码能让一个 <div class="scrollable"> 容器显示细长圆角滚动条，且在悬停时加深颜色：
.scrollable {
overflow-y: auto;
height: 200px;
}
.scrollable::-webkit-scrollbar {
width: 8px;
}
.scrollable::-webkit-scrollbar-track {
background: #f1f1f1;
border-radius: 4px;
}
.scrollable::-webkit-scrollbar-thumb {
background: #c1c1c1;
border-radius: 4px;
}
.scrollable::-webkit-scrollbar-thumb:hover {
background: #a0a0a0;
}
注意：width 控制纵向滚动条宽度，height 控制横向滚动条高度；若同时启用横向滚动，需额外设置 ::-webkit-scrollbar 的 height 值。移动端 Safari 对该伪类支持不稳定，部分 iOS 版本会降级为系统原生样式，无法强制覆盖。
真正麻烦的不是怎么写对，而是得时刻记得：这个样式永远只是一层“贴图”，它不改变滚动逻辑、不修复抖动、不解决 touch 设备的响应延迟——所有交互细节仍由浏览器底层控制。
