给body写::-webkit-scrollbar无效，因它只对实际滚动容器生效；需用包裹容器设overflow-y:auto并成套定义三个伪元素，firefox则需用scrollbar-width和scrollbar-color。
直接用 ::-webkit-scrollbar 给 body 写样式基本没用——它只对「实际滚动的容器」生效，不是全局开关。
为什么给 body 写 ::-webkit-scrollbar 没反应
浏览器根本不认 body::-webkit-scrollbar 这种写法，除非你显式强制 body 滚动：
-
body默认是「内容驱动滚动」，没有设置overflow-y时，伪元素规则不触发 - 即使写了
body { overflow-y: scroll; }，Chrome 也可能忽略或回退到系统默认样式 - 更稳妥的做法是：用一个包裹容器（比如
.page-wrapper），设固定高度 +overflow-y: auto，再把所有伪元素挂在这上面
必须成套写才生效的三个关键伪元素
漏掉任意一个，整个自定义逻辑会失效，浏览器直接回退默认滚动条：
-
::-webkit-scrollbar：只设宽高（垂直滚动条用width，水平用height），建议 8px–12px；width: 4px会被浏览器强制拉高 -
::-webkit-scrollbar-track：必须设background，否则轨道透明、和页面底色打架；可加border-radius，但别超过宽度一半 -
::-webkit-scrollbar-thumb：必须设background，否则滑块不可见；悬停反馈要用::-webkit-scrollbar-thumb:hover单独写
Firefox 兼容只能靠 scrollbar-width 和 scrollbar-color
Firefox 完全无视所有 ::-webkit- 伪类，只响应两个标准属性，且仅对根级滚动容器（html 或设置了 overflow 的块级元素）有效：
-
scrollbar-width只接受auto、thin、none；其他值如thick直接被忽略 -
scrollbar-color格式严格：scrollbar-color: <thumb-color><track-color></track-color></thumb-color>；顺序反了或track-color设为transparent，轨道就消失 - 注意：
scrollbar-color只在scrollbar-width: thin时才生效；设成none就彻底隐藏，颜色设置无效
嵌套滚动容器里最容易被忽略的细节
比如聊天窗口、表格区域、侧边栏等局部滚动区，样式隔离比想象中更脆弱：
- 不能依赖继承，每个可滚动容器都要单独写整套
::-webkit-scrollbar规则（包括track和thumb） -
overflow: overlay已废弃，别用；它在新版 Chrome/Edge 中已无效果 -
overscroll-behavior: contain在 macOS Safari 上可能干扰原生手势滚动，上线前务必真机测试 - 移动端需加
-webkit-overflow-scrolling: touch启用惯性滚动，但仅 Safari 支持，且仅对overflow: auto/scroll容器有效
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
