::-webkit-scrollbar仅在chrome、edge（新版）、safari等webkit/blink内核浏览器中生效，firefox不支持，需用scrollbar-width和scrollbar-color替代，ie及旧版edge无标准支持。
只能在基于 WebKit 的浏览器（Chrome、Safari、Edge 新版本）中用 ::-webkit-scrollbar 系列伪元素修改原生滚动条；Firefox 和旧版 Edge 不支持，IE 完全不支持。
哪些浏览器能用 ::-webkit-scrollbar
仅限 Chromium 内核（Chrome、新版 Edge）、WebKit 内核（Safari）浏览器。Firefox 使用 scrollbar-width 和 scrollbar-color 两个独立属性控制，且仅支持颜色和粗细，不支持轨道/滑块分离定制。IE/旧版 Edge 无任何标准支持方式。
-
::-webkit-scrollbar是非标准 CSS，W3C 从未将其纳入规范 - 即使在支持它的浏览器里，
::-webkit-scrollbar-track-piece、::-webkit-scrollbar-corner等部分子伪类行为也不稳定，建议只用最常用的三个：::-webkit-scrollbar、::-webkit-scrollbar-track、::-webkit-scrollbar-thumb - Safari 对
background-image在::-webkit-scrollbar-thumb中的支持较弱，用纯色更稳妥
::-webkit-scrollbar 各部分的作用与常见写法
它不是单个元素，而是一组可单独样式化的伪元素组合。必须同时定义宽度/高度（否则默认不可见），再分别设置轨道和滑块的外观。
-
::-webkit-scrollbar：整体容器，设width（垂直）或height（水平），单位推荐px，避免用em或百分比 -
::-webkit-scrollbar-track：滚动轨道背景区域，可用background、border-radius，但background-image在 Safari 中易失效 -
::-webkit-scrollbar-thumb：可拖动的滑块，支持background、border、border-radius；建议加transition: background .2s实现 hover 变色
最小可行示例：
div {
overflow-y: auto;
}
div::-webkit-scrollbar {
width: 8px;
}
div::-webkit-scrollbar-track {
background: #f1f1f1;
border-radius: 4px;
}
div::-webkit-scrollbar-thumb {
background: #c1c1c1;
border-radius: 4px;
}
div::-webkit-scrollbar-thumb:hover {
background: #a0a0a0;
}
用图片做滚动条背景时要注意什么
可以给 ::-webkit-scrollbar-track 或 ::-webkit-scrollbar-thumb 设置 background: url(...)，但实际效果受限明显。
- 图片尺寸必须匹配滚动条宽高，否则会平铺或拉伸变形；推荐用 SVG 或小尺寸 PNG，避免大图加载阻塞渲染
- 滑块（thumb）图片需考虑不同内容长度导致的尺寸变化——它会随内容比例缩放，但背景图不会自动适配，容易出现裁切或留白
- 若使用
background-size: contain或cover，在 Chrome 中表现尚可，但在 Safari 中可能被忽略，降级为平铺 - 不要依赖图片实现关键交互反馈（比如 hover 状态），优先用纯色 +
transition保证基础可用性
Firefox 的替代方案怎么写
Firefox 不认 ::-webkit-scrollbar，但提供了两个专有属性，只能控制颜色和粗细，不能改形状或加图片：
-
scrollbar-width: thin | auto | none：控制宽度，“thin”约等于 8px，“none”会隐藏滚动条（但仍可滚） -
scrollbar-color: <thumb-color><track-color></track-color></thumb-color>：顺序不能反，且只接受颜色值，不支持渐变或图片
兼容写法示例（放在同一选择器内）：
div {
scrollbar-width: thin;
scrollbar-color: #a0a0a0 #f1f1f1;
/* 下面是 WebKit 专属样式，Firefox 会忽略 */
overflow-y: auto;
}
真正跨浏览器一致的自定义滚动条，必须放弃原生滚动机制，用 JavaScript 重写（如 perfect-scrollbar 或 simplebar）。但那已不属于“CSS3 自定义原生滚动条”的范畴——它本质是隐藏原生条、另起一套 DOM 元素模拟滚动行为。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
