加 overflow-x: scroll 无滚动条的根本原因是容器未设固定宽度、子元素未禁用换行、内容未真正溢出；需三层结构分离职责，配合 flex-shrink: 0、touch-action 和 scrollbar 样式适配。
直接加 overflow-x: scroll 很可能没滚动条，甚至图片堆成一列——根本原因不是属性写错了，而是容器没“锁住”宽度、子元素没“拒绝换行”、内容压根没真正溢出。
为什么 overflow-x: scroll 加了也不显示滚动条
浏览器只在「子元素总宽度 > 容器显式宽度」时才触发水平滚动逻辑。如果容器是 width: 100%、子元素用了 flex: 1 或 width: 100%，它们会自动收缩填满，根本不会超宽。
- 容器必须设明确像素宽度（如
width: 600px）或最大宽度（max-width: 600px），不能只靠100% - 子元素必须禁用换行：对 flex 容器用
flex-wrap: nowrap；对 inline 元素用white-space: nowrap - 每个图片要固定尺寸且禁止压缩：
img { width: 200px; flex-shrink: 0; }，否则 flex 布局会强行缩图 -
overflow-x: scroll会强制显示空滚动条，日常开发优先用auto；仅当需避免滚动条出现/消失导致布局抖动时才用scroll
正确结构：三层分离，各司其职
把滚动行为、对齐逻辑、内容渲染拆开，能避开 90% 的定位漂移和溢出失效问题。
- 外层
.outer-container：只负责width+overflow-x: auto+overflow-y: hidden，不参与任何 flex 或居中 - 中层
.container：只做display: flex+justify-content: center（可选），不设 overflow - 内层
.dock：display: flex+flex-wrap: nowrap+gap（若需间距），每张图加flex-shrink: 0
移动端拖拽失效？补上 touch-action
在 iOS Safari 和部分安卓浏览器里，光有 overflow-x: auto 不够，手指划动会被系统当作页面滚动拦截。
- 给外层容器加上
touch-action: pan-y pinch-zoom，允许垂直滚动和缩放，但把水平拖拽交还给容器自身 - 若需纯水平拖拽（禁掉垂直滚动），用
touch-action: pan-x，但注意这会阻止页面上下滑动 - 别依赖
-webkit-overflow-scrolling: touch，它在新版本 Safari 中已被弃用
滚动条样式不可见？WebKit 伪元素必须配 height
水平滚动条默认在 macOS 和 iOS 上是“隐藏式”，只有滚动时才浮现；想常驻或自定义，得靠 ::-webkit-scrollbar，但关键参数容易漏。
-
.outer-container::-webkit-scrollbar必须设height: 8px（不是width），这是控制水平滚动条“厚度”的唯一有效属性 -
::-webkit-scrollbar-track和::-webkit-scrollbar-thumb要设背景色和圆角，否则在深色模式下可能完全看不见 - Firefox 不支持这套伪元素，要用
scrollbar-width: thin或none做降级，无法精细定制
最易被忽略的点：图片加载完成前，DOM 宽度计算可能为 0，导致初始不溢出；建议所有 img 标签带 width 和 height 属性（或 CSS 固定尺寸），避免回流重排引发滚动条闪现或错位。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
