用overflow-x: auto+white-space: nowrap可快速实现横向滚动，但safari下图片易换行（因未设flex-shrink: 0）、滚动条默认可见、触控卡顿；需加touch-action: pan-x、隐藏滚动条并兼顾多浏览器兼容性。
用 overflow-x: auto + white-space: nowrap 最快能跑起来，但 Safari 下图片会意外换行、滚动条默认可见、触控滚动卡顿——这些才是实际项目里卡住人的点。
为什么 display: flex 滚动画廊在 Safari 里突然换行？
根本原因是 Safari 对 flex-wrap 的默认行为更敏感，哪怕父容器设了 white-space: nowrap，只要子项（如 <img>）没明确设 flex-shrink: 0，它就可能把图片“压缩换行”。
- 必须给每个图片或包裹容器加
flex-shrink: 0 - 避免用
width: 100%或max-width: 100%，它们会触发收缩逻辑 - 推荐用固定宽高或
flex-basis: 240px这类明确值 - 如果用
<figure></figure>包裹<img>，记得把flex-shrink: 0加在<figure></figure>上，不是<img>
怎么隐藏原生滚动条又保留滚动功能？
隐藏不是为了“好看”，而是避免 Chrome/Firefox 滚动条占位导致内容错位，或 iOS 上滚动条遮挡右边缘图片。但直接 display: none 会禁掉滚动能力。
- Chrome/Edge：用
::-webkit-scrollbar { width: 0; height: 0; } - Firefox：加
scrollbar-width: none;（仅支持auto/thin/none） - Safari（macOS/iOS）：不支持伪元素隐藏，只能靠
overflow: overlay（已废弃）或用padding-right+margin-right: -16px视觉抵消（需 JS 检测是否为 Safari） - 更稳的方案：外层容器
overflow: hidden，内层加padding-right: 20px，再用margin-right: -20px把滚动条“挤出可视区”
touch-action: pan-y 是解决 iOS 卡顿的关键
iOS 默认对横向滚动区域同时监听 pan-x 和 pan-y，一旦手指稍有偏移，就会触发页面整体拖拽（比如下拉刷新），导致画廊响应迟钝甚至中断滚动。
- 必须给滚动容器加
touch-action: pan-y（允许竖向操作）+pan-x（允许横向滚动） - 完整写法：
touch-action: pan-y pan-x;—— 不能只写pan-x，否则 iOS 会禁掉所有 touch 行为 - 若容器内有可点击区域（如按钮），需额外加
touch-action: manipulation;到对应元素上，否则点击失效 - 注意：IE10+ 支持，但旧版 Android WebView 可能忽略，建议配合
cursor: grab;提供视觉反馈
横向滚动画廊真正的难点不在“怎么滚”，而在“怎么滚得稳”：Safari 的 flex 收缩、iOS 的 touch-action 冲突、各浏览器滚动条渲染差异——这些细节不逐个对齐，上线后用户一滑就出问题。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
