不能只靠::-webkit-scrollbar一套规则覆盖所有场景：它仅在chrome/edge/safari生效，firefox需用scrollbar-width和scrollbar-color，ios safari及新版android chrome基本不支持；滚动条未变主因是未显式设置overflow或伪元素缺失。
不能只靠 ::-webkit-scrollbar 一套规则就搞定所有场景——它只在 WebKit 内核（Chrome、Edge、Safari）里生效，Firefox 需要另一套，而移动端基本无效。
为什么写了样式但滚动条没变？
最常见原因不是语法错，而是滚动行为根本没触发：
-
overflow必须显式设置，比如overflow-y: auto或overflow: scroll；仅靠内容溢出容器不会激活伪元素 - 父容器没设高度或
overflow，子元素再长也不会出现滚动条，::-webkit-scrollbar自然不生效 -
overflow: hidden下强行加样式毫无意义——滚动条被隐藏了，伪元素链直接不渲染 - 选择器优先级被覆盖：检查 DevTools 的 Computed 面板，确认
background-color等关键属性是否被其他!important规则干掉
WebKit 内核下必须写的四个伪元素
漏掉任何一个都可能导致滑块不可见、轨道错位或整个样式失效：
-
::-webkit-scrollbar：必须设width（垂直）或height（水平），否则整条链不触发 -
::-webkit-scrollbar-track：避免用border或padding，容易遮挡滑块或导致偏移 -
::-webkit-scrollbar-thumb：至少得有background-color，否则透明不可见 -
::-webkit-scrollbar-corner：两个滚动条交汇处，默认会显示一块色块，不重置的话暗色主题下容易突兀
示例中常省略 ::-webkit-scrollbar-corner，但实际项目建议显式设为 background: transparent 或匹配主题色。
Firefox 怎么兼容？别指望深度定制
Firefox 97+ 支持 scrollbar-width 和 scrollbar-color，但仅限于控制粗细和主次色：
-
scrollbar-width: thin | auto | none—— 只能选三种预设宽度，不能设具体像素值 -
scrollbar-color: <thumb-color><track-color></track-color></thumb-color>—— 仅支持两个颜色，无圆角、无边框、无 hover 动效 -
::-moz-scrollbar存在但 API 不稳定，官方文档未正式支持，生产环境不建议使用
所以对 Firefox，务实做法是：用 scrollbar-color 做基础配色，其余交互细节直接放弃。
移动端真机上千万别赌支持
iOS Safari 完全禁用 ::-webkit-scrollbar；Android Chrome 从 80+ 版本起逐步移除支持。2026 年当前，真机调试时看到的几乎全是系统原生滚动条。
这意味着：
- 不要在移动端依赖 hover 效果或圆角滑块——它们不会出现
- 不要给
body直接写body::-webkit-scrollbar，Safari 会忽略，必须包裹在有明确overflow的容器内 - 暗色模式适配、CSS 变量切换等逻辑，在移动端只是“看起来很美”，实际不执行
真正需要把控的，是滚动手感（如 scroll-behavior: smooth）和可访问性（如键盘 Tab 导航是否连贯），而不是视觉样式。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
