必须绑定到实际触发滚动的容器且成套定义伪元素才生效；chrome需::-webkit-scrollbar、track、thumb及hover四者共存，firefox仅支持scrollbar-width和scrollbar-color配对，safari基本不支持自定义。
局部滚动条不是给 body 加样式就能生效的，必须绑定到具体有溢出行为的容器上，且各浏览器支持机制完全不同——Chrome/Edge 可用伪元素精细控制，Firefox 只认两个开关属性，Safari 基本放弃治疗。
为什么给 div 写了 ::-webkit-scrollbar 却没反应
根本原因是：伪元素只对「实际触发滚动」的块级元素生效，且必须成套出现。漏掉 ::-webkit-scrollbar-track 或 ::-webkit-scrollbar-thumb 中任意一个，整套规则就失效，回退到默认滚动条。
- 确保容器设置了
overflow-y: auto（或scroll），且子内容真实超出高度；仅设height不够，必须有溢出行为 - 伪元素必须写在容器选择器后面，比如
.list-container::-webkit-scrollbar，不能直接挂在html或body上 -
::-webkit-scrollbar必须先定义width（垂直滚动）或height（水平滚动），否则后续规则不解析 - 某些 UI 框架（如 Ant Design）或 CSS 重置会把
::-webkit-scrollbar设为display: none，需加!important覆盖
::-webkit-scrollbar 各部分必须怎么写才有效
不是“写了就行”，而是每个部分都有硬性要求和常见陷阱：
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
-
::-webkit-scrollbar：只设尺寸，width: 8px控制垂直滚动条粗细，建议 8–12px；width: 4px会被 Chrome 强制拉高，iOS Safari 完全无视 -
::-webkit-scrollbar-track：必须设background，否则轨道透明，和页面底色打架；border-radius别超宽高一半，否则视觉错位 -
::-webkit-scrollbar-thumb：必须设background，否则滑块不可见；圆角可用但别过大（如width: 8px配border-radius: 6px就会裁切） -
::-webkit-scrollbar-thumb:hover和::-webkit-scrollbar-thumb:active必须单独写，不能靠普通伪类继承；Safari 多数版本不支持 hover 状态
Firefox 怎么适配局部滚动条
Firefox 完全不认 ::-webkit- 系列，只响应两个属性，且只对「设置了 overflow 的块级元素」本身生效，对嵌套内部的 div 滚动无效。
-
scrollbar-width只接受auto、thin、none—— 写scrollbar-width: 6px或thick直接被忽略 -
scrollbar-color格式固定：scrollbar-color: <thumb-color><track-color></track-color></thumb-color>，顺序反了（比如把轨道色放前面）就完全失效 - 第二个参数（轨道色）千万别设
transparent，会导致轨道消失，只剩滑块悬浮，用户失去参照 - 这两个属性无法控制圆角、阴影、hover 动画，所谓“定制”仅限颜色 + 粗细两级
Safari 和移动端要不要硬刚
不要。macOS/iOS Safari 对自定义滚动条支持极弱：16.4+ 才开始部分支持 scrollbar-width 和 scrollbar-color，但依然不认 ::-webkit-scrollbar；系统级“自动隐藏滚动条”策略还会覆盖所有 CSS 设置。
- 在 Safari 上写
scrollbar-width: thin，实测多数版本当auto处理，滚动条还是宽的 -
::-webkit-scrollbar-thumb:hover在 iOS Safari 基本不触发，加了也白加 - 想在 Safari 实现圆角 + 悬停变色 + 稳定响应？唯一可靠路径是 JS 库（如
simplebar或overlay-scrollbars）接管滚动逻辑 - 深色模式下不能靠
@media (prefers-color-scheme: dark)包裹整套规则，得分别写两套并绑定到容器类名上
最易被忽略的一点：自定义滚动条不是纯视觉问题，它直接影响触控体验——滑块太小（width: 4px）、轨道对比度低、hover 响应缺失，都会让移动端用户拖不动、找不到、误操作。别只盯着桌面端效果。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
