直接改body或html上的::-webkit-scrollbar基本无效，因该伪元素仅对设置了overflow且内容溢出的实际滚动容器生效；必须成套定义::-webkit-scrollbar、-track、-thumb及:hover，且firefox需用scrollbar-width和scrollbar-color替代。
直接改 body 或 html 上的 ::-webkit-scrollbar 基本没用，这不是写错了，而是浏览器压根不认——滚动条样式必须绑定在「实际会滚动的容器」上，且 WebKit 和 Gecko 完全不兼容。
为什么 ::-webkit-scrollbar 写了却没反应
常见现象是加了一堆伪元素，但滚动条还是系统默认样式。根本原因有两个：
- 把
::-webkit-scrollbar直接挂在html或body上，指望它管全页；但 WebKit 只对设置了overflow: auto或scroll且内容真实溢出的块级元素生效 - 漏写了
::-webkit-scrollbar-track或::-webkit-scrollbar-thumb中任意一个，整个自定义链就失效——不是“部分生效”，而是直接回退到原生样式 -
::-webkit-scrollbar自身没设width（垂直）或height（水平），等于没声明，整套规则被忽略
Chrome/Edge 必须成套写的最小可用组合
以下四行是 WebKit 下能生效的最简结构，缺一不可：
::-webkit-scrollbar {
width: 8px;
}
::-webkit-scrollbar-track {
background: #f1f1f1;
}
::-webkit-scrollbar-thumb {
background: #888;
}
::-webkit-scrollbar-thumb:hover {
background: #555;
}
关键点：
-
width: 8px是硬性要求，6px–10px最稳妥；太小（如4px）会被浏览器强制拉高 -
::-webkit-scrollbar-track必须设background，否则轨道透明，和页面底色打架 -
::-webkit-scrollbar-thumb的background是刚需，不设就是完全透明 - 悬停效果只能靠
::-webkit-scrollbar-thumb:hover单独写，对父容器加:hover没反应
Firefox 怎么配才不白写
Firefox 完全无视所有 ::-webkit- 开头的伪元素，只认两个属性，且只对根滚动容器（html 或显式设了 overflow 的块级元素）有效：
-
scrollbar-width: thin—— 唯一可调粗细的选项；auto下 macOS 用户几乎看不到条，none则彻底隐藏 -
scrollbar-color: #6c5ce7 #f0f0f0—— 顺序不能反，第一个是滑块色，第二个是轨道色；设transparent会让轨道消失，但滑块仍可拖，体验断裂 - 这两个属性不支持圆角、渐变、阴影、
:hover，也不响应@media (prefers-color-scheme: dark)，深色模式得手动重复整套规则
Safari（尤其 iOS）别硬刚
iOS Safari 完全忽略所有滚动条 CSS，这不是 bug，是苹果的设计决策。macOS Safari 虽然识别 scrollbar-width 和 scrollbar-color，但：
- 系统偏好里若开启“自动隐藏滚动条”，所有 CSS 设置都会被系统策略覆盖
-
scrollbar-width: thin在多数版本中实测等同于auto，不可信 - 别写
::-webkit-scrollbar-thumb:active，它根本不触发 - 真要统一外观，要么降级为默认样式，要么用
@supports (-webkit-appearance: none)做特性检测后切换 JS 方案（如 simplebar）
局部容器（比如 .table-container）想定制？必须确保它有固定高度 + overflow-y: auto，然后所有伪元素都挂在这个类上，而不是 body —— 这是最容易被忽略的结构性前提。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
