::-webkit-scrollbar 仅在 WebKit 内核浏览器（Chrome、Edge 79+、Safari）中生效，Firefox 和旧版 IE 不支持；常见无效原因是 overflow 未正确设置、作用对象错误、父容器高度未限制、CSS 优先级被覆盖；Firefox 使用 scrollbar-width 和 scrollbar-color 原生属性；iOS Safari 完全禁用，Android Chrome 80+ 已逐步移除支持；建议用 CSS 变量提升可维护性，并先确保滚动行为存在再定制样式。
::-webkit-scrollbar 不是标准 CSS，它只在 WebKit 内核浏览器（Chrome、Edge 79+、Safari）中生效，Firefox 和旧版 IE 完全不识别——这不是“没写对”，而是根本没实现。
为什么写了 ::-webkit-scrollbar 却没效果
常见原因不是语法错，而是滚动行为没触发：
-
overflow没设对：必须显式设置overflow: auto或overflow-y: scroll，仅靠内容溢出但父容器没设overflow，伪元素不会生效 - 作用对象错了：写在
body上，Safari 可能忽略；建议套一层有明确宽高的容器，比如.scroll-container - 父容器高度未限制：子元素即使内容超长，若父容器
height: auto且没overflow，滚动条压根不出现 - CSS 优先级被覆盖：检查 DevTools 的 Computed 面板，确认
background等属性最终值是否来自你的规则
Firefox 下怎么让滚动条“看起来”一致
Firefox 不支持 ::-webkit-scrollbar，但提供了两个原生属性：
-
scrollbar-width：取值为auto（默认）、thin（窄）、none（隐藏但可滚动） -
scrollbar-color：接受两个颜色值，顺序是thumb（滑块）track（轨道），例如scrollbar-color: #666 #f0f0f0 - 这两个属性只能用在滚动容器上（如
html、div），不能用于伪元素 - 注意：
scrollbar-width: thin并不保证所有 Firefox 版本都渲染成同样宽度，只是“尽可能窄”
iOS Safari 和 Android Chrome 能不能用
基本不能：
立即学习“前端免费学习笔记（深入）”；
- iOS Safari 完全禁用
::-webkit-scrollbar，任何样式都会被忽略 - Android Chrome 80+ 开始逐步移除支持，目前多数版本已失效
- 这意味着：如果你的项目需覆盖移动端 WebView 或 iOS 用户，别依赖这套伪元素，要么接受原生样式，要么引入 JS 库（如
simplebar） - 哪怕只做 PC 端管理后台，也要确认是否真不需要支持 Firefox —— 如果需要，
::-webkit-scrollbar只能作为增强，不能当作核心方案
用 CSS 变量控制滚动条样式更可控
硬编码颜色和尺寸会让主题切换或维护变得麻烦。把关键值抽成变量，再注入到伪元素里：
:root {
--scroll-thumb-bg: #888;
--scroll-track-bg: #f1f1f1;
--scroll-width: 8px;
}
.scroll-area::-webkit-scrollbar {
width: var(--scroll-width);
}
.scroll-area::-webkit-scrollbar-track {
background: var(--scroll-track-bg);
}
.scroll-area::-webkit-scrollbar-thumb {
background: var(--scroll-thumb-bg);
border-radius: 4px;
}
注意：伪元素本身不继承父级变量，所以变量必须定义在 :root 或滚动容器自身上，且选择器作用域要能覆盖到 ::-webkit-scrollbar 所在位置。
真正容易被忽略的点是：滚动条是否显示，取决于容器是否有滚动行为；而能否自定义，取决于浏览器是否支持该伪元素——这两件事不能混为一谈。先确保能滚，再考虑怎么美；先确认目标浏览器，再决定要不要写这一堆 ::-webkit-。
