移动端列表左右滑动本质是用原生 overflow-x: auto 实现横向滚动，需配合 display: flex、flex: 0 0 auto、-webkit-overflow-scrolling: touch 及 touch-action 优化，隐藏滚动条并保障 ios 流畅性。
移动端列表左右滑动查看更多，本质是让容器内部内容可横向滚动，同时隐藏默认滚动条、保证触控流畅，并适配不同屏幕。关键不是“模拟滑动”，而是用原生 overflow-x: auto 配合恰当的 CSS 重置和 touch 行为控制。
让列表容器支持横向滚动
核心是设置容器为 display: flex 或 white-space: nowrap，并启用横向滚动。不能只靠 overflow-x: auto，否则子项会换行或收缩。
推荐做法：
- 容器设
display: flex+overflow-x: auto+scroll-behavior: smooth（可选） - 子项设
flex: 0 0 auto（禁止伸缩、禁止换行、宽度由内容决定） - 必须加
-webkit-overflow-scrolling: touch（iOS Safari 滚动惯性必需） - 移除默认滚动条：用
::-webkit-scrollbar { display: none; }（仅 WebKit，其他平台无原生滚动条干扰）
解决 iOS 上滑不动或卡顿问题
iOS Safari 对 overflow-x: auto 的触控响应很敏感，常见现象是“手指划了但没反应”或“滑到一半突然停住”。根本原因是容器或其父级触发了 touch-action: pan-y（比如页面整体用了 overscroll-behavior: contain），或者子项存在 will-change: transform 等干扰渲染层的行为。
实操要点：
- 确保列表容器及其所有祖先元素没有设置
touch-action: pan-y或touch-action: none - 避免在子项上写
transform、will-change，除非必要；若需动画，优先用translateX()配合requestAnimationFrame自己控制，而非依赖 overflow 滚动 - 给容器加
backface-visibility: hidden和-webkit-transform: translateZ(0)可强制硬件加速，缓解卡顿
适配不同设备宽度与内容密度
横向列表容易在小屏上撑破容器，或在大屏上留白过多。不能只靠固定宽度，要结合视口单位和最小尺寸控制。
建议组合使用：
- 子项宽度用
min-width: calc(100vw - 48px)（减去左右 padding）或min-width: 280px（保底手机单列宽度） - 容器加
padding-inline: 16px（或padding-left/padding-right），避免内容贴边 - 对超长文本子项，用
text-overflow: ellipsis+white-space: nowrap+overflow: hidden截断，防止宽度失控 - 不依赖 JavaScript 计算列数，CSS Grid 在横向滚动场景下反而增加复杂度，保持 Flex 布局最可控
真正难的不是让内容动起来，而是让每一次滑动都响应及时、停止精准、不误触发页面回弹或缩放——这些细节全藏在 touch-action、scroll-behavior 和硬件加速的配合里。少一个 -webkit-overflow-scrolling: touch，iOS 上就可能完全失效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
