Chrome/Edge/Safari用::-webkit-scrollbar系列伪元素定制滚动条，Firefox需额外用scrollbar-width和scrollbar-color；必须确保容器有真实滚动内容且overflow生效，iOS Safari兼容性差，建议降级处理。
Chrome/Firefox/Edge里怎么改滚动条颜色和宽度
只在WebKit内核（Chrome、Edge、Safari）和Firefox（有限支持）中生效，::-webkit-scrollbar 是唯一能直接控制滚动条轨道和滑块的伪元素，但Firefox从100+版本开始也部分支持::-webkit-scrollbar（仅限::-webkit-scrollbar-track和::-webkit-scrollbar-thumb，不支持::-webkit-scrollbar-button等）。
常见错误是直接写::-webkit-scrollbar却没加父容器选择器，导致全局污染或无效；或者只设了width但没配background，结果滑块变透明看不见。
- 必须给滚动容器（如
div）设置overflow: auto或scroll，否则伪元素不触发 -
::-webkit-scrollbar本身只设宽高，不设颜色；颜色由::-webkit-scrollbar-track和::-webkit-scrollbar-thumb分别控制 - Firefox需额外加
scrollbar-width和scrollbar-color（仅支持thin/auto两种宽度值）
div.scroll-container {
overflow-y: auto;
scrollbar-width: thin; /* Firefox */
scrollbar-color: #6c63ff #f5f5f5; /* thumb track */
}
<p>div.scroll-container::-webkit-scrollbar {
width: 8px; /<em> 垂直滚动条宽度 </em>/
}</p><p>div.scroll-container::-webkit-scrollbar-track {
background: #f5f5f5;
}</p><p>div.scroll-container::-webkit-scrollbar-thumb {
background: #6c63ff;
border-radius: 4px;
}为什么设置了::-webkit-scrollbar但没反应
最常踩的坑是容器没有“真实可滚动内容”——比如height设得太小、子元素没撑开、或用了flex: 1但父级没高度约束，导致overflow根本没生效，伪元素自然不渲染。
另一个隐蔽问题是：某些CSS重置库（如Normalize.css）或框架（如Ant Design）会主动重置::-webkit-scrollbar为display: none，得用!important覆盖（虽不推荐，但有时不得不）。
立即学习“前端免费学习笔记（深入）”；
- 检查
getComputedStyle(element).overflowY是否为auto或scroll - 用DevTools的“Computed”面板搜
scrollbar，确认伪元素样式是否被覆盖 - 移动端Safari对
::-webkit-scrollbar支持极弱（iOS 16+才开始有限支持），别依赖它做关键交互
如何让自定义滚动条适配深色模式
不能靠@media (prefers-color-scheme: dark)直接套在外面——因为::-webkit-scrollbar伪元素不继承父级color或background，必须显式重写整套规则。
性能上无明显影响，但要注意：深色模式下若thumb用太暗的颜色（如#333），在黑色背景上可能完全不可见，得留出足够对比度。
- 用
:root变量统一管理颜色，再在@media里切换变量值，比重复写两套规则更可控 - Firefox的
scrollbar-color不响应CSS变量，得用rgb()或具体值硬编码 - 避免用
box-shadow或transform动效——滚动条重绘频繁，容易卡顿
:root {
--scroll-thumb: #6c63ff;
--scroll-track: #f5f5f5;
}
<p>@media (prefers-color-scheme: dark) {
:root {
--scroll-thumb: #a78bfa;
--scroll-track: #1e293b;
}
}</p><p>div.scroll-container::-webkit-scrollbar-thumb {
background: var(--scroll-thumb);
}</p><p>div.scroll-container::-webkit-scrollbar-track {
background: var(--scroll-track);
}移动端和Safari兼容性到底行不行
iOS Safari直到16.4才开始支持::-webkit-scrollbar（仅thumb和track，且不支持border-radius或box-shadow），而Android Chrome基本全支持。这意味着：想在微信内嵌页或iOS App WebView里稳定使用，大概率会失败。
替代方案不是“换写法”，而是“换思路”——用JS模拟滚动（如smooth-scrolling库）成本高、手感差；更实际的做法是接受系统原生滚动条，只通过overscroll-behavior控制回弹效果，或用scrollbar-gutter预留空间防布局抖动。
- 不要给
html或body设::-webkit-scrollbar——iOS Safari会忽略，还可能触发渲染bug - 测试真机比模拟器靠谱，尤其是iPad OS的滚动行为和iPhone不同
- 如果产品必须定制滚动条且要跨平台，优先考虑设计妥协（比如用分页、卡片折叠代替长列表）
滚动条样式看似简单，但真正上线时，80%的问题出在“以为它一直存在”，其实它在iOS旧版、微信WebView、部分Linux桌面环境里压根不出现。留一手降级方案比强行hack更省时间。
