不是必须，但仅 WebKit/Blink 内核浏览器（Chrome、Edge、Safari）支持 ::-webkit-scrollbar；Firefox 完全不识别，仅支持 scrollbar-width 和 scrollbar-color，故纯 CSS 无法统一美化所有浏览器的 body 滚动条。
body 滚动条美化必须用 ::-webkit-scrollbar 吗？
不是必须，但目前只有 WebKit/Blink 内核（Chrome、Edge、Safari）支持 ::-webkit-scrollbar 系列伪元素；Firefox 完全不识别，也不提供等效 CSS API。所以如果你只写 ::-webkit-scrollbar，在 Firefox 里滚动条会回退到系统默认样式——这不是 bug，是标准缺失。
这意味着：想“统一美化”所有浏览器的 body 滚动条，纯 CSS 行不通；若只要求 Chrome/Edge 生效，::-webkit-scrollbar 是唯一可行路径。
::-webkit-scrollbar 必须作用于 body 才生效？
不一定。它作用于**有滚动行为的块级容器**，而 body 是否产生滚动，取决于文档高度是否超过视口。更可靠的做法是给 html 或 body 显式设 overflow: auto，并确保它们能触发滚动上下文。
常见陷阱：
立即学习“前端免费学习笔记（深入）”；
-
body默认overflow: visible，此时::-webkit-scrollbar可能不触发（尤其 Safari） - 移动端 Safari 对
body的滚动条样式支持极弱，建议改用html或包裹一层div并设overflow-y: scroll - 如果用了
position: fixed全屏布局，body可能不再滚动，样式自然失效
最小可用的 ::-webkit-scrollbar 样式组合
只设 ::-webkit-scrollbar 本身没效果，必须至少包含三个部分：滚动条轨道（::-webkit-scrollbar-track）、滑块（::-webkit-scrollbar-thumb）、以及触发器（::-webkit-scrollbar 定义宽高）。
html {
/* 确保 html 成为滚动容器（比 body 更稳定） */
height: 100%;
overflow-y: scroll;
}
<p>::-webkit-scrollbar {
width: 8px; /<em> 垂直滚动条宽度 </em>/
height: 8px; /<em> 水平滚动条高度（一般不用） </em>/
}</p><p>::-webkit-scrollbar-track {
background: #f1f1f1;
border-radius: 4px;
}</p><p>::-webkit-scrollbar-thumb {
background: #c1c1c1;
border-radius: 4px;
}</p><p>::-webkit-scrollbar-thumb:hover {
background: #a0a0a0;
}注意：width 和 height 必须设单位（如 px），设 rem 或百分比无效；background 推荐用纯色或 linear-gradient，避免复杂背景图（性能差且部分版本不渲染）。
为什么加了样式还是看不到效果？
最常被忽略的两个原因：
-
body或html没有实际滚动内容：测试时务必让页面高度 > 视口（比如加min-height: 150vh） - CSS 优先级被覆盖：某些 UI 框架（如 Ant Design、Element Plus）会在组件内重置
::-webkit-scrollbar，需提高选择器权重，例如用html::-webkit-scrollbar或加!important（仅限 thumb / track 的background等属性） - Safari 16.4+ 对
::-webkit-scrollbar的支持有回归：部分场景下需同时设置html和body的overflow，且不能有transform或will-change在祖先节点上
移动端真机调试时，记得打开 Safari 的「开发 → 远程自动化」，用桌面 Safari 检查元素——直接在手机上看不到伪元素。
