原生方案用 overflow-x: auto + flex 实现轻量滑动，需设 white-space: nowrap 或 display: flex、flex: 0 0 auto、隐藏滚动条及 scroll-behavior: smooth；手势需 touchstart 阻止默认行为，scroll 对齐用 scrollby 精准控制，优于 swiper 的复杂场景。
用 overflow-x: auto 实现原生轻量滑动
不需要 JS 就能左右滑动卡片，关键是让容器“允许横向滚动但隐藏滚动条”。常见错误是只加 overflow-x: auto 却忘了设 white-space: nowrap，导致子元素换行，滑不动。
实操要点：
- 卡片容器设
display: flex或white-space: nowrap（二者选一，前者更可控） - 每个卡片设
flex: 0 0 auto（防止被压缩）或display: inline-block - 容器加
overflow-x: auto和scrollbar-width: none（Firefox） +::-webkit-scrollbar { display: none }（Chrome/Safari）隐藏滚动条 - 加
scroll-behavior: smooth让拖拽/滚动更顺滑
适合内容固定、无需自动轮播、强调手动能控的场景，比如商品列表、标签页导航。
touchstart/touchmove 手势滑动要防默认行为
移动端手指滑动卡片时，页面容易跟着上下滚动或触发缩放，根本原因是没阻止原生事件。只监听 touchmove 不够，必须在 touchstart 阶段就调用 preventDefault()，否则 iOS Safari 会拦截后续手势。
关键细节：
- 在
touchstart回调里立即执行e.preventDefault()，且不能加条件判断（比如“只在水平移动时阻止”——这时已经晚了） - 用
e.touches[0].clientX记录起点，touchmove中计算位移差，只在水平位移 > 垂直位移时才执行卡片位移逻辑 - 别忘了
touchend后做惯性补位（简单做法：用setTimeout+scrollTo模拟）
纯 JS 手势控制灵活，但兼容性坑多——iOS 15+ 对 preventDefault 更严格，Android 部分 WebView 可能不触发 touchcancel。
用 scrollBy() + scrollLeft 做精准卡片对齐
用户滑到一半松手，卡片常卡在中间，体验很差。靠 CSS scroll-snap-type 虽然简洁，但 IE 不支持、Safari 旧版本有偏移 bug，更稳的方式是 JS 主动对齐。
做法很简单：
- 监听容器的
scroll事件（注意节流，用requestAnimationFrame包一层） - 读取当前
scrollLeft，除以单张卡片宽度（含 gap），四舍五入得目标索引 - 调用
element.scrollBy({ left: targetIndex * cardWidth - element.scrollLeft, behavior: 'smooth' }) - 为避免反复触发，对齐完成后加个 flag 锁，100ms 内忽略新 scroll 事件
注意：卡片宽度必须是确定值（不能是 % 或 flex-grow），否则计算会漂移；gap 用 margin-right 而非 gap，方便统一进宽度计算。
为什么不用 Swiper.js？这些地方它反而添乱
Swiper 功能强，但嵌在复杂布局里常出问题：比如卡片内有 position: absolute 元素错位、Vue/React 组件更新后 swiper.update() 忘调、SSR 渲染时报 document is not defined。
真要用 Swiper，必须：
- 服务端渲染时跳过初始化（Vue 的
v-if="isClient"，React 的useEffect+typeof window !== 'undefined'） - 禁用
observer: true和dynamicBullets: true——这两个在 DOM 频繁变动时极易引发重绘卡顿 - 手动控制
slidesPerView：别用'auto'，算好当前容器宽度 / 卡片宽度向下取整，传数字
卡片数量少（≤ 5）、交互简单时，原生方案代码量更少、加载更快、调试路径更直——多数时候，你缺的不是轮子，是 scroll 对齐那几行逻辑。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
