滚动条未变是因滚动行为未触发，而非语法错误；必须显式设置overflow且内容真实溢出，父容器需有固定高度，避免overflow:hidden，同时配齐::-webkit-scrollbar、track、thumb、corner四个伪元素，并注意firefox仅支持scrollbar-width和scrollbar-color基础定制。
为什么写了::-webkit-scrollbar但滚动条没变
不是语法错，而是滚动行为根本没触发。浏览器只在元素有显式overflow且内容真实溢出时才渲染伪元素。常见失效场景包括：
• 父容器没设固定高度或max-height，子元素再长也不会触发滚动
• 用了overflow: hidden或overflow: visible，伪元素链直接不激活
• Flex/Grid 布局中子项未撑开父容器（比如flex: 1但父级没高度约束）
• 某些 UI 框架（如 Ant Design）或 CSS 重置库会用display: none重置::-webkit-scrollbar，需用!important覆盖（虽不推荐，但有时必须）
::-webkit-scrollbar必须配齐的四个伪元素
漏掉任意一个都可能导致滑块消失、轨道错位或样式静默失效：
• ::-webkit-scrollbar：必须设width（垂直）或height（水平），否则整条链不触发
• ::-webkit-scrollbar-track：避免用border或padding，容易遮挡滑块或导致偏移；建议用background-clip: padding-box保圆角
• ::-webkit-scrollbar-thumb：至少得有background-color，否则透明不可见；border-radius不能超过width的一半（如width: 6px时border-radius: 4px会失效）
• ::-webkit-scrollbar-corner：右下角交汇处，默认色块在暗色主题下突兀，建议显式设background: transparent
Firefox 怎么兼容？别指望深度定制
Firefox 97+ 支持scrollbar-width和scrollbar-color，但能力极有限：
• scrollbar-width只接受auto、thin、none三种值，不能设像素宽度
• scrollbar-color只支持两个颜色：<thumb-color><track-color></track-color></thumb-color>，不支持圆角、边框、hover 动效
• ::-moz-scrollbar存在但 API 不稳定，官方未正式支持，生产环境禁用
• 实操建议：对 Firefox 只做基础配色，其余细节放弃；同时写两套规则，避免只靠 WebKit 方案
移动端真机上千万别赌支持
iOS Safari 完全禁用::-webkit-scrollbar系列规则；Android Chrome 从 80+ 版本起逐步移除局部容器支持，目前仅对级滚动条有不稳定表现。
• 所谓“自定义”在真机上大概率退回系统原生样式，且无报错、不警告
• :hover类交互（如悬停变色）在触屏设备上无效
• 不要依赖滚动条宽度预留右侧padding，它在 iOS 上根本不存在
• 如需一致体验，必须换 JS 方案（如 simplebar），但要注意 touch 惯性、键盘导航等兼容成本
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
