::-webkit-scrollbar仅适用于chrome、edge（windows/macos）、safari（macos），firefox和所有ios/ipados safari完全不支持；无变化主因是浏览器不识别或容器未满足overflow+高度+内容溢出三条件。
直接说结论：::-webkit-scrollbar 只能用于 Chrome、Edge（Windows/macOS）、Safari（macOS），Firefox 和所有 iOS/iPadOS Safari 完全不识别它；写了没反应，大概率不是语法错，而是浏览器根本不支持或容器没触发滚动。
为什么写了 ::-webkit-scrollbar 样式却完全没变化
最常被忽略的前提是：该元素必须同时满足三个条件，伪元素才会渲染——
-
overflow-y或overflow显式设为auto、scroll（不能只靠内容溢出） - 容器有明确的
height或max-height，且子内容实际超出这个高度 - 选择器精准命中滚动容器本身，比如
.list-container::-webkit-scrollbar，而不是只写div::-webkit-scrollbar这种宽泛规则
另外，某些 CSS 重置库（如 Normalize.css）或 UI 框架（如 Ant Design）会悄悄把 ::-webkit-scrollbar 设为 display: none，此时需检查 DevTools 的 “Computed” 面板里是否被覆盖，必要时用 !important 强制生效（虽不推荐，但有时真得这么干）。
Firefox 和 Chrome 都要兼容，怎么写才不漏掉
不能只写一套。必须并行两套声明：
- 对 Chrome/Edge/Safari：用
::-webkit-scrollbar+::-webkit-scrollbar-track+::-webkit-scrollbar-thumb组合控制外观 - 对 Firefox：单独加
scrollbar-width: thin和scrollbar-color: #6c63ff #f5f5f5，且这两条必须作用于**同一个滚动容器**（不是body，除非你真想改全局）
示例（作用于类名为 .scroll-area 的容器）：
`.scroll-area {
overflow-y: auto;
scrollbar-width: thin;
scrollbar-color: #6c63ff #f5f5f5;
}
.scroll-area::-webkit-scrollbar {
width: 8px;
}
.scroll-area::-webkit-scrollbar-track {
background: #f5f5f5;
}
.scroll-area::-webkit-scrollbar-thumb {
background: #6c63ff;
border-radius: 4px;
}`
注意：scrollbar-width 的值只能是 auto、thin 或 none，不是像素值；写成 scrollbar-width: 8px 会直接失效。
移动端为什么死活不生效
iOS Safari（包括微信、钉钉内嵌 WebView）完全忽略所有 ::-webkit-scrollbar 规则，Android Chrome 从 v80 起也逐步移除对 ::-webkit-scrollbar-thumb 和 ::-webkit-scrollbar-track 的支持，仅保留 ::-webkit-scrollbar 的宽度控制（且不可靠）。
这意味着：你在 iPhone 上看到的永远是系统原生半透明细滚动条，任何圆角、颜色、hover 效果都不会出现。别浪费时间调试 iOS 的 ::-webkit-scrollbar-thumb:hover —— 它根本不会触发。
如果业务强依赖一致滚动体验（比如设计稿要求深色模式下滚动条必须是紫色），就得放弃纯 CSS 方案，改用 JS 库（如 simplebar），但要注意它默认禁用原生 touch 惯性滚动，需手动开启 touch: true 并测试键盘导航是否仍可用。
真正容易被忽略的一点：即使在 Chrome 里，::-webkit-scrollbar 也改不了滚动行为本身——滑动灵敏度、回弹曲线、键盘方向键步进量，全由浏览器控制，CSS 层面无权干预。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
