跨浏览器自定义滚动条需同时使用::-webkit-scrollbar（chrome/safari）、scrollbar-width和scrollbar-color（firefox）；失效主因是overflow未生效或内容未溢出；水平滚动条通过height控制，深色模式需在@media中完整重写伪元素样式。
现代浏览器中，仅靠 ::-webkit-scrollbar 无法跨浏览器生效；必须搭配 scrollbar-width 和 scrollbar-color 才能在 Firefox 中显示自定义效果，Chrome/Safari 则依赖 WebKit 伪元素。
为什么写了 ::-webkit-scrollbar 却没反应
最常见原因是容器根本没触发滚动行为——overflow 没生效，伪元素就不会渲染。
- 检查容器是否设置了
overflow: auto或scroll（不能是visible） - 确认内容高度/宽度确实超出了容器尺寸（比如子元素没撑开、
height设为100%但父级无高度约束） - 某些 UI 框架（如 Ant Design、Element Plus）或 CSS 重置库会把
::-webkit-scrollbar设为display: none，需用!important覆盖（不推荐但有时必须） - 用 DevTools 的 Computed 面板搜索
scrollbar，看样式是否被其他规则覆盖
scrollbar-width 和 scrollbar-color 在 Firefox 中怎么用
Firefox 不支持 ::-webkit-scrollbar 全套伪元素（仅从 v100+ 开始有限支持 track 和 thumb），只能靠这两个标准属性控制基础样式。
-
scrollbar-width只接受auto、thin、none三个值，不能设具体像素 -
scrollbar-color接收两个颜色值：thumb颜色在前，track颜色在后，例如scrollbar-color: #6c63ff #f5f5f5 - 必须写在实际有滚动行为的容器上（如
.scroll-container），不能只写在body上指望全局生效 - 若同时用了 WebKit 规则，建议把标准属性放在前面，作为降级兜底
如何单独控制水平滚动条（比如表格横向滚动）
水平滚动条不是靠改 width，而是通过 height 控制视觉“厚度”，再隐藏垂直方向以避免干扰。
-
::-webkit-scrollbar的height属性控制水平滚动条高度（即它在页面上占的垂直空间） - 设
width: 0可隐藏垂直滚动条，只留水平方向 - 水平滚动条的
thumb和track伪元素写法与垂直一致，但需注意：某些容器（如table父级div）需显式设overflow-x: auto - 移动端 Safari 对水平方向
::-webkit-scrollbar支持极弱（iOS 16+ 才开始部分支持），别依赖它做关键交互
深色模式下滚动条样式不切换怎么办
@media (prefers-color-scheme: dark) 不能直接包裹 ::-webkit-scrollbar 规则——伪元素不继承父级颜色或背景，必须显式重写整套样式。
- 不能这么写：
@media (prefers-color-scheme: dark) { ::-webkit-scrollbar-thumb { background: #333; } } - 必须重复声明所有相关伪元素，并在媒体查询内完整覆盖：
@media (prefers-color-scheme: dark) { .container::-webkit-scrollbar-thumb { background: #555; } .container::-webkit-scrollbar-track { background: #222; } } - 如果用 CSS 自定义属性（
--scroll-thumb），也要在媒体查询里重新赋值，否则变量不会自动响应
真正麻烦的不是写几行 CSS，而是不同浏览器对同一套语义的理解差异——WebKit 把滚动条当“可绘制层”，Firefox 当“系统控件”，而移动端几乎忽略所有定制。动手前先确认目标环境，比堆样式更重要。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
