::-webkit-scrollbar 仅在 WebKit/Blink 浏览器（Chrome/Edge/Safari）中生效，Firefox 需用 scrollbar-width 和 scrollbar-color；须同时适配两套方案，且优先局部定制、保障可访问性与移动端降级。
Chrome/Firefox 中 ::-webkit-scrollbar 为什么没生效
因为 ::-webkit-scrollbar 只在基于 WebKit/Blink 的浏览器中有效（Chrome、Edge、Safari），Firefox 默认不支持——它用的是 scrollbar-width 和 scrollbar-color 这套独立 API。如果你只写了 ::-webkit-scrollbar 却在 Firefox 里测试，滚动条原封不动是正常现象。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 必须同时写两套：一套给 Chrome/Edge/Safari，用
::-webkit-scrollbar系列伪元素；另一套给 Firefox，用scrollbar-width（可选auto、thin、none）和scrollbar-color（接受两个颜色值：滑块色 + 轨道色） -
::-webkit-scrollbar本身不渲染任何东西，必须配合::-webkit-scrollbar-track和::-webkit-scrollbar-thumb才可见 - 不要给
::-webkit-scrollbar设宽高，它只是容器；真正控制尺寸的是::-webkit-scrollbar-thumb的width（垂直滚动条）或height（水平滚动条）
::-webkit-scrollbar-thumb 圆角和悬停变色怎么做
滑块（thumb）是唯一能交互、最常定制的部分。圆角靠 border-radius，悬停效果靠 :hover 伪类——但注意：它不支持 :active 或 :focus，拖拽中状态无法单独捕获。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 设
border-radius: 8px时，确保::-webkit-scrollbar-track也有匹配的border-radius，否则滑块会“出界” - 悬停变色直接写
::-webkit-scrollbar-thumb:hover { background-color: #6c5ce7; }即可，无需 JS - 避免用半透明色（如
rgba(0,0,0,0.3)）做滑块背景——部分旧版 Chrome 渲染异常，改用hsla()或纯色更稳 - 如果滑块太细（比如
width: 6px），iOS Safari 可能忽略圆角，建议最小设到8px
全局自定义 vs 局部容器自定义，怎么选
全局写法（body ::-webkit-scrollbar）会影响所有可滚动元素，包括 <select></select> 下拉框、<textarea></textarea>、甚至开发者工具面板——这通常不是你想要的。局部控制才是稳妥做法。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 给目标容器加 class，比如
<div class="custom-scroll">，然后写 <code>.custom-scroll::-webkit-scrollbar系列规则 - 局部作用域下，
::-webkit-scrollbar-track的background推荐用transparent或浅灰，避免遮挡内容边缘 - 若容器用了
overflow: overlay（已废弃，仅旧版 Safari 支持），自定义会失效；统一用overflow: auto或scroll - 移动端（尤其 iOS）对自定义滚动条支持有限：滑块尺寸、圆角、阴影都可能被忽略，优先保证功能可用，再谈样式
- 避免在
::-webkit-scrollbar-thumb上使用box-shadow、transform、filter—— 这些属性在滚动过程中强制 GPU 合成，低端设备易掉帧 - 滑块颜色与轨道色对比度至少达 4.5:1（可用 WebAIM Contrast Checker 验证），否则 WCAG 不达标
- 别用
display: none或visibility: hidden隐藏整个滚动条——这会让键盘用户（Tab 切换）失去滚动能力；要用scrollbar-width: none（Firefox）+::-webkit-scrollbar { width: 0; }（WebKit）组合 - 如果项目需支持 IE，直接放弃自定义——IE 完全不识别这些 API，也不值得 hack
性能和可访问性容易被忽略的点
滚动条虽小，但不当定制会拖慢渲染帧率，也影响屏幕阅读器行为。比如把滑块设成 opacity: 0.5 并加 transition，每次滚动都会触发重绘；又比如隐藏轨道却没提供足够对比度的滑块，视障用户几乎无法定位。
实操建议：
立即学习“前端免费学习笔记（深入）”；
真正在意体验的细节，往往藏在 Firefox 兼容写法、移动端降级策略和颜色对比度验证里，而不是堆砌更多 CSS 动画。
