chrome/edge/safari通过::-webkit-scrollbar系列伪元素定制滚动条，需为容器设overflow且指定::-webkit-scrollbar宽高；firefox 97+用::-moz-scrollbar但兼容性差；ios safari及新版android chrome不支持，移动端应优先保障基础滚动体验。
Chrome/Firefox/Edge里怎么改滚动条颜色和粗细
只在WebKit内核（Chrome、Edge、Safari）和Firefox新版本中有效，IE完全不支持。Firefox从97+开始用::-moz-scrollbar，但兼容性差、API不稳定，实际项目里基本只靠::-webkit-scrollbar撑住。
核心是四个伪元素组合：::-webkit-scrollbar（整体容器）、::-webkit-scrollbar-track（轨道）、::-webkit-scrollbar-thumb（滑块）、::-webkit-scrollbar-corner（右下角交汇处）。漏掉任何一个都可能让样式失效或显示异常。
- 必须给
::-webkit-scrollbar设width或height，否则整个伪元素链不触发 -
::-webkit-scrollbar-thumb至少要设background-color，不然滑块透明不可见 - 不要给
::-webkit-scrollbar-track设border或padding，容易错位或遮挡滑块
div.custom-scroll {
overflow-y: auto;
}
div.custom-scroll::-webkit-scrollbar {
width: 8px; /* 垂直滚动条宽度 */
}
div.custom-scroll::-webkit-scrollbar-track {
background: #f1f1f1;
}
div.custom-scroll::-webkit-scrollbar-thumb {
background: #888;
border-radius: 4px;
}
div.custom-scroll::-webkit-scrollbar-thumb:hover {
background: #555;
}
为什么加了样式滚动条还是没变
常见原因不是写法错，而是选择器没命中——::-webkit-scrollbar只能作用于有滚动行为的元素，且该元素必须显式设置overflow（如overflow: auto或overflow-y: scroll），仅靠内容溢出不触发。
- 父容器高度固定但未设
overflow，子元素即使内容超长也无滚动条，伪元素自然无效 - 用了
overflow: hidden再想加滚动条样式？不可能，滚动条本身被隐藏了 - 在
body上直接写body::-webkit-scrollbar，部分浏览器（如Safari）会忽略，建议套一层div容器控制 - CSS优先级冲突：其他规则带
!important覆盖了你的background，检查Computed面板看最终生效值
移动端（iOS Safari / Android Chrome）能用吗
不能。iOS Safari完全禁用::-webkit-scrollbar，Android Chrome从80+起也逐步移除支持。所谓“自定义滚动条”在真机上大概率退回系统默认样式，且无法监听或干预。
如果业务强依赖滚动条外观（比如设计稿明确要求圆角+浅灰轨道），得接受它在手机端不可控；若只是优化体验，建议把重点放在scroll-behavior: smooth、触控惯性、滚动阈值等更可靠的交互点上。
- iOS上连
overflow: scroll都需要-webkit-overflow-scrolling: touch（已废弃但仍有影响） - 某些Android WebView会渲染出极窄的原生滚动条，但拒绝任何CSS覆盖
- 别试图用JS模拟滚动条（如
perfect-scrollbar），性能差、手势不一致、键盘导航断裂
要不要加@supports做渐进增强
没必要。这个伪元素没有标准@supports检测方式，@supports (scrollbar-width: thin)是Firefox私有属性，和WebKit方案无关；而@supports selector(::-webkit-scrollbar)在主流浏览器中支持度不一，Safari 16.4+才支持selector()函数，旧版直接当无效规则丢弃。
更务实的做法是：写死::-webkit-scrollbar规则，把它当成“有就用，没有也不坏”的装饰性增强。只要不影响滚动功能本身，就不值得为它增加条件判断逻辑。
真正容易被忽略的是高对比度模式（Windows HC / macOS VoiceOver）下，自定义滚动条可能完全消失或与系统配色冲突——这不是代码问题，而是无障碍访问的硬约束，没法绕开。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
