::-webkit-scrollbar仅在webkit/blink浏览器（chrome/edge/safari）生效，firefox需用scrollbar-width和scrollbar-color；ios safari自16.4起仅部分支持且滚动条默认隐藏；性能敏感场景应优先使用原生滚动条。
Chrome/Firefox里::-webkit-scrollbar为什么没反应
因为::-webkit-scrollbar只在基于WebKit/Blink的浏览器中生效（Chrome、Edge、Safari），Firefox完全不支持——它用的是scrollbar-width和scrollbar-color这两个CSS属性。如果你在Firefox里写了一堆::-webkit-scrollbar-track却没效果，不是代码错，是根本没走对路。
实操建议：
- 先用
@supports (scrollbar-width: auto)检测Firefox，再用@supports selector(::-webkit-scrollbar)检测WebKit系（注意：后者在Firefox中会直接跳过） - 不要只写
::-webkit-scrollbar就以为万事大吉；至少补上Firefox的html { scrollbar-width: thin; scrollbar-color: #666 #f0f0f0; } - 滚动条伪元素必须作用于可滚动容器（比如
overflow: auto或scroll的div），对body生效需额外加html { height: 100%; overflow: hidden; }再让body接管滚动
::-webkit-scrollbar-thumb圆角和hover状态怎么加
thumb是拖拽滑块，它支持大部分常规CSS属性，但有隐性限制：不能设display、float、margin（会被忽略），padding也无效；能用的主要是background、border-radius、width/height（取决于滚动方向）。
实操建议：
- 圆角直接写
border-radius: 8px，但注意：如果thumb太窄（比如width: 6px），border-radius: 8px会失效——此时应设为border-radius: 3px或更小 - hover状态要用
::-webkit-scrollbar-thumb:hover，不是:hover；同理，激活态是::-webkit-scrollbar-thumb:active - 背景推荐用
linear-gradient而非纯色，视觉更稳；避免用rgba()半透，某些旧Chromium版本会渲染异常
移动端Safari滚动条样式为何完全不显示
iOS Safari（包括iPadOS）自iOS 16.4起才开始部分支持::-webkit-scrollbar，且仅限于overflow: scroll的容器，body或html仍无视所有伪元素。更关键的是：它默认隐藏滚动条，只有用户正在滚动时才短暂浮现——你写的thumb样式根本没机会被看见。
实操建议：
- 别在iOS上强求自定义滚动条；如确需提示可滚动，改用
overscroll-behavior: contain配合下拉刷新动画或底部阴影 - 检测是否为iOS Safari：
@supports (-webkit-touch-callout: none) and (not (-webkit-scrollbar: none))，然后直接跳过样式注入 - 若用WebView（如Cordova、Capacitor），可在原生层通过
webview.scrollView.indicatorStyle控制颜色，CSS无效
自定义滚动条影响性能或导致重绘抖动怎么办
过度使用渐变、阴影、透明度或频繁触发transform会让thumb在滚动时掉帧，尤其在低端Android设备上。更隐蔽的问题是：某些CSS组合（比如background: radial-gradient() + border-radius）会触发合成层爆炸，吃光GPU内存。
实操建议：
- thumb背景优先用
solid color或简单linear-gradient(to bottom, #666, #444)；禁用box-shadow和filter - 避免在
::-webkit-scrollbar-track上设background-image，它会随容器尺寸反复重绘；改用background-color+ 极简边框 - 滚动容器加上
will-change: scroll-position（慎用！仅当已确认卡顿且容器固定高度时加）
真正难的不是写出样式，而是判断什么时候该放弃自定义——比如表格内嵌滚动、长列表虚拟滚动、或者需要无障碍支持的场景，原生滚动条反而是最稳的选择。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
