推荐使用 css 原生滚动方案：外层 flex + overflow-x: auto，子项 flex: 0 0 100vw + scroll-snap-align: center，容器加 scroll-snap-type: x mandatory 和 touch-action: pan-x，并隐藏滚动条。
手机端图片横向滑动，核心是让容器支持平滑、可控的水平滚动，同时适配触摸操作。不依赖插件也能实现，关键是 CSS 布局 + 触控行为处理。
用 CSS 原生滚动（最轻量、推荐）
这是目前兼容性好、性能高、代码最少的方案，尤其适合相册类单页全屏滑动：
- 外层容器设 display: flex + flex-wrap: nowrap + overflow-x: auto
- 每张图作为子项，设 flex: 0 0 100vw（严格占满视口宽度），并加 scroll-snap-align: center
- 容器加 scroll-snap-type: x mandatory 实现“卡点”停驻
- iOS 必须加 touch-action: pan-x，否则默认禁用横向拖拽
- 隐藏滚动条：WebKit 用
::-webkit-scrollbar { display: none }，Firefox 加scrollbar-width: none
用 transform + touch 事件（手动控制位移）
适合需要自定义动画、无缝轮播或响应式切换逻辑的场景：
- 监听
touchstart记录起始 X 坐标 - 在
touchmove中实时计算偏移，用transform: translateX()更新图片位置 -
touchend时判断滑动距离是否超阈值（如 50px），决定是否切图或回弹 - 给容器加 transition: transform 0.3s ease-out 让松手后过渡更自然
- 务必调用
e.preventDefault()在touchmove中，防止页面误触发纵向滚动
移动端必须注意的细节
很多滑动失效或卡顿，其实卡在平台特性上：
- iOS Safari 默认
touch-action: pan-y，必须显式写pan-x才能左右拖 - 避免在滚动区域里监听空的
touchstart，哪怕没逻辑也会触发 passive event warning，导致滚动降级 - 卡片/图片宽度别用
flex: 1或width: 100%，它会随容器缩放；用flex: 0 0 100vw或固定像素更稳 - 真机测试时打开 Safari Web Inspector，看 Timeline 是否频繁触发 Layout——若有，很可能是无意读取了
offsetWidth或getBoundingClientRect() - 想同步当前页码？别用 scroll 事件，改用
IntersectionObserver监听元素进入视口，更精准可靠
快速起步建议
新手可先从 scroll-snap 方案入手：
- 复制一个含 3 张图的
<section></section>容器 - 按上面 CSS 规则逐条加上，重点检查
touch-action和scroll-snap-align - 在 iPhone 上用 Safari 打开，手指左右滑——如果卡点准确、无回弹、不跳页，就成功了
- 后续再加页码指示器或自动轮播，都基于这个稳定基础
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
