::-webkit-scrollbar没反应不是语法错误，而是滚动行为未触发：容器需显式设overflow:auto/scroll、有固定高度约束、内容真实溢出，且伪元素必须作用于该可滚动容器本身，不能写在body或html上。
为什么写了 ::-webkit-scrollbar 却没反应
不是语法错，而是滚动行为根本没触发。浏览器只在“真有滚动需求”时才渲染这些伪元素。
-
overflow必须显式设为auto、scroll或overlay（后者已废弃但部分生效），仅靠内容溢出但父容器没设overflow，伪元素不会出现 - 容器必须有**可计算的高度约束**：比如
height: 400px或max-height: 300px；height: auto+flex: 1但父级没高度，滚动条也不会出来 - 别写在
body或html上——Chrome/Safari 对它们的支持极不稳定；套一层.scroll-container才可靠 - 检查 DevTools 的 Computed 面板里是否搜到
scrollbar相关样式，确认没被 Normalize.css、Ant Design 等重置库用display: none覆盖掉
怎样让 ::-webkit-scrollbar-thumb 显示圆角和 hover 效果
它支持常规属性，但有硬性限制：不能设 margin、padding、display，border-radius 也受尺寸制约。
-
border-radius最大值不能超过thumb尺寸的一半：比如width: 6px（垂直滚动）时，border-radius: 3px是安全上限，写4px会被裁切 - hover 状态必须用
::-webkit-scrollbar-thumb:hover，不是:hover；同理，拖拽中是::-webkit-scrollbar-thumb:active - 渐变背景容易失效，优先用
background-image: linear-gradient()替代background: linear-gradient()；加background-clip: content-box可避免被内边距遮挡 - 避免
rgba()半透色——某些 Chromium 版本会渲染成灰块，纯色或hsl()更稳
如何同时兼容 Firefox 和 WebKit 浏览器
Firefox 完全不识别 ::-webkit-scrollbar，它只认 scrollbar-width 和 scrollbar-color 这两个原生属性，且作用范围不同。
- WebKit 系列：写在滚动容器上，如
.scroll-container::-webkit-scrollbar - Firefox：这两个属性**必须写在
html或滚动容器本身上**，写在body不一定生效；例如：.scroll-container { scrollbar-width: thin; scrollbar-color: #6c63ff #f5f5f5; } -
scrollbar-color只接受两个纯色值（滑块、轨道），不支持圆角、阴影、渐变，也不支持 hover 状态切换 - 用
@supports做条件加载更稳妥：@supports (scrollbar-width: auto) { /* Firefox 规则 */ }和@supports selector(::-webkit-scrollbar) { /* WebKit 规则 */ }
移动端 Safari 和 Android Chrome 能不能用
iOS Safari 自 16.4 起才开始有限支持 ::-webkit-scrollbar，但仅限于 overflow: scroll 的局部容器，body 仍无视；且滚动条默认只在滚动中短暂显示，你写的 thumb 样式大概率没机会被看见。
立即学习“前端免费学习笔记（深入）”；
- Android Chrome 80+ 已逐步移除支持，目前多数版本已完全失效
- iOS 上不要依赖任何 CSS 滚动条美化——这不是兼容性问题，是平台策略性禁用
- 如果项目需覆盖 iOS 用户，要么接受原生样式，要么引入 JS 库（如 simplebar），但它会接管原生滚动逻辑，影响惯性滚动、键盘导航和屏幕阅读器体验
- 测试时务必真机验证：macOS Safari ≠ iOS Safari，两者渲染差异极大
实际滚动条样式能否生效，取决于「滚动是否真实发生」，而不是「CSS 是否写对」。很多调试失败的案例，根源都在容器高度不可控、overflow 没显式声明，或误以为写在 body 就能全局生效。
