overflow-x: scroll 在移动端不生效，主因是父容器缺固定宽度、子项未设 flex-shrink: 0，或 ios safari 缺 -webkit-overflow-scrolling: touch；需配合 flex-direction: row、white-space: nowrap 及硬件加速优化。
为什么 overflow-x: scroll 在移动端经常不生效
直接加 overflow-x: scroll 却无法滑动，大概率是因为父容器没设固定宽度、子项没设 flex-shrink: 0，或者被 iOS Safari 的默认滚动拦截了。iOS 上必须显式触发“可滚动”行为，仅靠 CSS 不够稳定。
实操建议：
- 父容器需设
display: flex+overflow-x: auto（auto比scroll更稳妥，避免空滚动条） - 子卡片必须加
flex-shrink: 0，否则 Flex 会压缩它们以适应容器，失去横向排列基础 - 给父容器加
-webkit-overflow-scrolling: touch（iOS Safari 必须项，否则滑动卡顿或无响应） - 确保子项有明确宽度（如
width: 240px或min-width: 240px），不能全靠内容撑开
Flex 容器里卡片换行导致纵向堆叠怎么办
如果卡片意外折行，说明 Flex 主轴方向没对齐，或容器高度/宽度约束冲突。横向滑动列表必须强制单行。
实操建议：
- 父容器加
flex-direction: row（虽是默认值，但显式声明更可靠） - 加
white-space: nowrap防止内联内容换行干扰布局 - 子卡片用
display: inline-block或保持display: block，但绝不能设flex-wrap: wrap - 检查是否有未重置的 margin/padding 导致总宽度溢出计算，可用
box-sizing: border-box统一盒模型
滑动体验差：卡顿、回弹过猛、无法惯性滚动
iOS 和部分安卓 WebView 对 overflow 滚动优化有限，尤其在卡片含图片或阴影时。单纯依赖原生滚动容易掉帧。
实操建议：
- 给滚动容器加
will-change: scroll-position或transform: translateZ(0)触发硬件加速 - 避免在滚动区域内部使用
filter、大尺寸box-shadow或未压缩的高清图 - 若仍卡顿，考虑降级为轻量 JS 方案：监听
touchstart/touchmove手动更新transform: translateX()，绕过原生滚动限制 - 移除
body上可能存在的overscroll-behavior: contain，它会抑制滚动传播
兼容性与真机调试关键点
Android Chrome 一般表现良好，但 iOS 15+ 开始对 -webkit-overflow-scrolling 的支持变弱，部分机型需额外处理。
实操建议：
- 测试必须在真机上进行，模拟器常忽略触摸行为细节
- 在 iOS 上，若滑动后内容偏移或卡死，尝试给卡片加
backface-visibility: hidden - 微信内置浏览器（X5 内核）可能需要
overflow: -webkit-marquee回退方案，但优先走标准流 - 不要依赖
scroll-behavior: smooth做横向滚动动画，移动端兼容性差且不可控
最易被忽略的是子项的 flex-shrink 和 iOS 的 -webkit-overflow-scrolling —— 少一个，整个列表就可能静止不动。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
