::-webkit-scrollbar 仅在 webkit/blink 内核浏览器（chrome、edge、safari）中生效，firefox 不支持，需用 scrollbar-width 和 scrollbar-color 实现兼容。
Chrome/Firefox 中 ::-webkit-scrollbar 为什么没生效
因为 ::-webkit-scrollbar 仅在基于 WebKit/Blink 的浏览器中有效（Chrome、Edge、Safari），Firefox 默认不支持——它用的是 scrollbar-width 和 scrollbar-color 这套独立 CSS 属性。所以如果你在 Firefox 里调 ::-webkit-scrollbar，它直接被忽略，连报错都不会有。
实操建议：
- 先确认目标浏览器：只面向 Chrome/Edge 用户？那就专注写
::-webkit-scrollbar；需要兼容 Firefox，则必须额外加scrollbar-width: thin | auto | none和scrollbar-color: <thumb><track></track></thumb> -
::-webkit-scrollbar必须作用于可滚动的容器（如div且设置了overflow: auto或scroll），对body生效需额外处理（见下条） - 该伪元素默认不继承，不能靠父级样式传递，必须显式写在滚动容器选择器下
美化 body 滚动条时 ::-webkit-scrollbar 不起作用
因为某些浏览器（尤其是 Chrome）对 html 或 body 元素上的 ::-webkit-scrollbar 支持不稳定，更可靠的做法是把滚动逻辑收束到一个子容器内，比如：
<div class="scroll-container"> <!-- 大量内容 --> </div>
然后给它加样式：
.scroll-container {
height: 400px;
overflow-y: auto;
}
<p>.scroll-container::-webkit-scrollbar {
width: 8px;
}
.scroll-container::-webkit-scrollbar-track {
background: #f1f1f1;
}
.scroll-container::-webkit-scrollbar-thumb {
background: #c1c1c1;
border-radius: 4px;
}
.scroll-container::-webkit-scrollbar-thumb:hover {
background: #a0a0a0;
}</p>
要点：
- 不要依赖
body::-webkit-scrollbar，它在部分版本 Chrome 中会被无视 -
::-webkit-scrollbar-thumb至少要设background，否则不可见；::-webkit-scrollbar-track可选，不设则用浏览器默认轨道 - 如果容器是 flex 或 grid 布局，确保其高度可计算（避免
height: auto导致无法触发滚动）
::-webkit-scrollbar 各部件的作用和常用参数组合
::-webkit-scrollbar 是一个“伪元素组”，实际生效需要搭配多个子伪类，缺一不可：
-
::-webkit-scrollbar：控制整体尺寸（width横向滚动条，height纵向滚动条） -
::-webkit-scrollbar-track：轨道背景，建议设background和圆角（border-radius）提升观感 -
::-webkit-scrollbar-thumb：滑块本身，必须设background；可用border-radius做胶囊形，box-shadow加浮雕感 -
::-webkit-scrollbar-thumb:hover和::-webkit-scrollbar-thumb:active可分别定义悬停/拖拽态（注意：iOS Safari 不支持:hover）
常见踩坑点：
- 只写了
::-webkit-scrollbar和::-webkit-scrollbar-thumb，但没写::-webkit-scrollbar-track，结果滑块紧贴容器边缘，视觉突兀 - 给
thumb设了opacity: 0.8，但在低版本 Chrome 中不支持透明度，导致完全不可见 - 用
linear-gradient做 thumb 背景时，忘了加浏览器前缀（-webkit-linear-gradient），旧版 Safari 失效
Firefox 下如何实现类似效果
Firefox 完全不认 ::-webkit-scrollbar，必须换一套语法：
.scroll-container {
scrollbar-width: thin; /* 或 auto / none */
scrollbar-color: #c1c1c1 #f1f1f1; /* thumb 色 + track 色 */
}
说明：
-
scrollbar-width: thin会让滚动条变窄（类似 WebKit 的width: 8px），但无法精确控制像素值 -
scrollbar-color只接受两个颜色值，不支持渐变、图片或圆角；若设为scrollbar-color: transparent transparent，滚动条会隐形但依然可交互（慎用） - 这两个属性在 Chrome 110+ 也已支持，可作为渐进增强方案，但别指望它和 WebKit 表现一致
真正跨浏览器统一控制滚动条样式的路基本走不通——WebKit 系精细可控，Firefox 简陋但稳定，Safari 对伪元素支持又常滞后。能做的，是优先保障功能可用，再按浏览器分层优化视觉。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
