必须为body显式设置overflow-y: scroll或auto并配合height: 100vh、margin: 0，才能使::-webkit-scrollbar生效；且需完整定义track、thumb等伪元素及width、background等必要属性，firefox和safari支持有限，跨浏览器一致需js库辅助。
body { overflow-y: scroll } 是前提，否则 ::-webkit-scrollbar 不生效
直接写 body::-webkit-scrollbar 却没反应？大概率是 body 根本没触发滚动。浏览器只对「实际发生内容溢出」的容器应用自定义滚动条，而默认 body 的 overflow 是 visible，不产生滚动行为。
必须显式声明滚动机制：
-
body { overflow-y: scroll; }—— 强制显示垂直滚动条（哪怕内容不够长），这是让::-webkit-scrollbar生效的最低要求 - 更稳妥的写法是
body { overflow-y: auto; height: 100vh; margin: 0; }：避免默认8px外边距干扰高度计算，同时确保内容撑不满时也不强制显示滚动条 - 如果页面用了
min-height: 100vh但没设overflow，依然不会触发自定义样式
body::-webkit-scrollbar 必须成套写，漏一个就全退回到系统默认
Chrome/Edge 中，::-webkit-scrollbar 不是“部分生效”的机制。只要缺了 ::-webkit-scrollbar-track 或 ::-webkit-scrollbar-thumb，整个链路就失效。
正确写法示例：
body {
overflow-y: auto;
margin: 0;
height: 100vh;
}
body::-webkit-scrollbar {
width: 10px;
}
body::-webkit-scrollbar-track {
background: #f1f1f1;
border-radius: 5px;
}
body::-webkit-scrollbar-thumb {
background: #c1c1c1;
border-radius: 5px;
}
body::-webkit-scrollbar-thumb:hover {
background: #a0a0a0;
}
-
width是刚需，不设则整个伪元素链被忽略（水平滚动条用height） -
::-webkit-scrollbar-track必须有background，否则轨道透明，和页面底色混在一起 -
::-webkit-scrollbar-thumb同样必须设background，否则滑块不可见 - 悬停效果只能靠
::-webkit-scrollbar-thumb:hover，写body:hover .thumb没用
Firefox 只认 scrollbar-width 和 scrollbar-color，且只对 body 有效
Firefox 完全无视所有 ::-webkit- 伪元素。想让它也生效，得单独加两行：
body {
scrollbar-width: thin;
scrollbar-color: #c1c1c1 #f1f1f1;
}
-
scrollbar-width只接受auto、thin、none；写10px或thick直接被忽略 -
scrollbar-color顺序不能反：thumb在前，track在后；第二个参数写transparent会导致轨道“消失”，但滑块还能拖——体验断裂，别这么干 - 这两个属性只在根级滚动容器上起作用，比如
body或设置了overflow的.main-wrapper，对嵌套div无效 -
scrollbar-width: none会彻底隐藏滚动条，此时scrollbar-color不生效
Safari 基本不可靠，别指望它支持圆角或 hover
iOS Safari 16.4+ 才开始有限支持 ::-webkit-scrollbar，macOS Safari 对 ::-webkit-scrollbar-thumb:hover、::-webkit-scrollbar-button 等基本忽略，且不支持 transition 动画。
- 不要给
body::-webkit-scrollbar-thumb:active写样式——它根本不触发 -
scrollbar-width: thin在多数 Safari 版本里等同于auto，别依赖 - 如果设计稿明确要求「圆角 + 悬停变色 + 全平台一致」，原生 CSS 已到极限，该上
simplebar或overlay-scrollbars这类 JS 库了
真正容易被忽略的是：全局滚动条定制不是“写完就跑”，而是每换一个浏览器都要验证是否真在滚动的那个容器上生效——尤其是 Safari，它连 body 上的 ::-webkit-scrollbar 都可能静默降级。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
