::-webkit-scrollbar仅在WebKit/Blink内核浏览器生效，Firefox需用scrollbar-width和scrollbar-color，iOS Safari完全不支持；横向滚动条用height控制粗细，容器须设overflow-x:auto且内容不换行。
直接用 ::-webkit-scrollbar 系列伪类能快速美化滚动条，但只在 Chrome、Edge、Safari 里生效；Firefox 必须用 scrollbar-width 和 scrollbar-color 单独处理，iOS Safari 则完全不支持——别白费劲。
为什么 ::-webkit-scrollbar 在 Firefox 里没反应
它根本不是标准属性，而是 WebKit/Blink 内核的私有实现。Firefox 使用 Gecko 引擎，对 ::-webkit-scrollbar 连解析都不做，更不会报错或警告。你写的样式会被静默丢弃。
- 必须为 Firefox 单独加
scrollbar-width: thin（或auto）和scrollbar-color: #888 #f1f1f1 -
scrollbar-color只接受两个颜色值：滑块色 + 轨道色，不支持border-radius、box-shadow或渐变 - 这两个属性要写在触发滚动的元素上，比如
.list { scrollbar-width: thin; scrollbar-color: #666 #eee; }，不能只挂在body或全局*上（部分版本会失效）
横向滚动条美化时 width 和 height 容易写反
纵向滚动条用 width 控制粗细，横向滚动条却要用 height ——这是最常卡住人的点。写反了，整个 ::-webkit-scrollbar-thumb 就不渲染，或者滑块错位到看不见。
- 容器必须设
overflow-x: auto，且内部内容不能换行（加white-space: nowrap或flex-wrap: nowrap） -
::-webkit-scrollbar { height: 8px; }是必须项，漏掉就回退浏览器默认 -
::-webkit-scrollbar-thumb的border-radius推荐用999px，比固定值更适应不同长度滑块 - 别给
thumb漏background，透明=不可拖拽
美化 body 滚动条为什么总失败
Chrome 对 html::-webkit-scrollbar 或 body::-webkit-scrollbar 支持极不稳定，尤其新版中常被忽略。可靠做法是把滚动收束到一个明确的子容器内。
立即学习“前端免费学习笔记（深入）”；
- 避免直接操作
body，改用带固定高度的div.scroll-container并设overflow-y: auto - 该容器若用
flex或grid，需确保高度可计算（比如height: 400px，而非height: auto） -
::-webkit-scrollbar不继承，父级写了没用，必须显式写在滚动容器选择器下 - macOS 下滚动条默认悬停才显示，想常驻？WebKit 侧靠
min-height: 40px+ 不透明background；Firefox 侧靠scrollbar-width: thin配合明确颜色
真正麻烦的不是写法，而是得同时维护两套逻辑：一套精细控制 WebKit 的滑块圆角、hover 动画、边框；另一套在 Firefox 里只能调宽窄和两个纯色。而 iOS Safari 直接无视全部——如果你的产品必须覆盖移动端 Safari，就得接受原生滚动条，或引入 JS 方案（如 simplebar），但那已是另一层权衡了。
