横向滚动条美化需用::-webkit-scrollbar系列伪类配overflow-x，仅chrome/edge/safari支持；firefox需用scrollbar-width和scrollbar-color，且功能受限；容器须设固定宽高、overflow-x:auto及white-space:nowrap防折行；::-webkit-scrollbar的height控制横向厚度，非width；滑块最小高度建议≥6px确保触屏可用。
横向滚动条能美化，但必须用 ::-webkit-scrollbar 系列伪类配 overflow-x，且只在 Chrome、Edge、Safari（新版）生效；Firefox 完全不认这套，得另配 scrollbar-width 和 scrollbar-color。
横向滚动容器必须显式触发 overflow-x
光写 display: flex; flex-direction: row 不会自动出现横向滚动条——内容得真正“溢出”才行。常见失效原因是没设固定宽高或没限制子项换行。
- 容器需设
width或max-width，并加overflow-x: auto或scroll（推荐auto，避免空滚动条） - 内部内容要用
white-space: nowrap或flex-wrap: nowrap防止折行，否则宽度算不准 - 别依赖父容器的
overflow：横向滚动样式必须写在目标容器自身上，父级设了overflow: hidden会直接裁掉滚动条 - 示例结构：
.scroll-x { width: 300px; overflow-x: auto; }<br>.scroll-x > * { white-space: nowrap; }
::-webkit-scrollbar 的 width/height 别写反
横向滚动条靠 height 控制厚度，不是 width——这是最常踩的坑。写反会导致样式完全不生效或滑块错位。
-
::-webkit-scrollbar必须设height: 8px（横向）或width: 8px（纵向），漏掉就回退默认 -
::-webkit-scrollbar-track和::-webkit-scrollbar-thumb的border-radius建议用999px，比固定值更可靠（滑块高度动态变化） - 别给
::-webkit-scrollbar-thumb漏background-color，否则透明不可见 - 典型写法：
::-webkit-scrollbar { height: 8px; }<br>::-webkit-scrollbar-track { background: #f5f5f5; border-radius: 999px; }<br>::-webkit-scrollbar-thumb { background: #aaa; border-radius: 999px; }<br>::-webkit-scrollbar-thumb:hover { background: #777; }
Firefox 下横向滚动条只能降级处理
Firefox 对横向滚动条的控制能力极弱：scrollbar-width 只影响粗细，scrollbar-color 只能设滑块+轨道色，无法调圆角、阴影、hover 效果——而且这些属性对 overflow-x 容器的支持也不稳定。
- Firefox 中
scrollbar-width: thin在横向容器上可能被忽略，实际仍显示默认宽度 -
scrollbar-color必须写在触发滚动的元素上（如.scroll-x），不能写在body或父级 - 不要混用 WebKit 和 Firefox 属性期望“叠加”，它们互不识别，只是静默失效
- 若项目必须统一外观，得用 JS 库（如
overlay-scrollbars），纯 CSS 无解
移动端和触屏交互容易失灵
iOS Safari 和 Android Chrome 对自定义横向滚动条的支持有限，尤其在触屏拖动时易卡顿或响应迟钝——这不是样式问题，而是浏览器对合成层滚动的优化策略变了。
- 避免在横向滚动容器上同时用
transform或will-change，旧版 Chrome 下会直接丢掉::-webkit-scrollbar - 别设
overscroll-behavior: contain，它会切断滚动链，导致横向滚动无法触发 - 测试真机：模拟器里看起来正常，但 iOS 上滑块可能拖不动，得关掉
border-radius或降低opacity试试 - 安全底线：横向滚动条优先保证功能可用，再谈美观；宁可留白，别让滑块太窄（
height 在触屏上基本点不中）
横向滚动条美化最麻烦的从来不是怎么写样式，而是怎么让滑块在各种设备上都点得中、拖得动、不闪跳——WebKit 属性本身很轻量，但它的生效条件太苛刻，稍有遗漏就全盘失效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
