原生css+少量js可实现可靠轻量页面滑动：overflow-x+flex适用于手动滚动场景，需设flex布局、隐藏滚动条；transform+transition适合全屏切换，需transition写在容器上并用transitionend清理；移动端手势须touchstart立即preventdefault、判断位移防误触、touchend惯性补位，并注意passive: false和事件卸载。
原生 CSS + 少量 JS 就能实现可靠、轻量、可手控的页面切换滑动，不需要引入 Swiper 或其他大型库——前提是结构清晰、事件处理到位、滚动行为可控。
用 overflow-x: auto + flex 实现无 JS 卡片级滑动
适合标签页导航、商品列表等「固定内容、纯手动滚动」场景。关键不是加了 overflow-x: auto，而是子元素不换行、不压缩、滚动条被隐藏。
- 容器必须设
display: flex（或white-space: nowrap），否则卡片会折行，横向滚动失效 - 每个卡片加
flex: 0 0 auto，防止 Flex 布局自动缩放挤压内容 - 隐藏滚动条要分浏览器写：
scrollbar-width: none（Firefox）+::-webkit-scrollbar { display: none }（Chrome/Safari） -
scroll-behavior: smooth加在容器上，能让鼠标滚轮或scrollTo滚动变顺滑，但 iOS Safari 对该属性支持不稳定，别依赖它做核心逻辑
用 transform: translateX() + transition 控制全屏页面滑动
适用于单页应用中两个或多个全屏视图之间的左右切换，动画可控、性能好，但需 JS 配合状态管理。
- 所有页面容器用
position: absolute叠在一起，宽度设为100vw，父容器overflow: hidden - 初始时当前页
transform: translateX(0)，目标页translateX(100%)；切换时两者同时更新：当前页 →translateX(-100%)，目标页 →translateX(0) -
transition: transform 0.4s ease-in-out必须写在页面容器上，不能只写在父容器；且避免和opacity过渡混用，否则可能触发重排 - 动画结束后，建议用
transitionend事件清理 class 或调整z-index，否则快速连点可能造成视觉错位
移动端手势滑动必须在 touchstart 阶段 preventDefault()
iOS Safari 和部分 Android WebView 对 touch 事件拦截极严，稍晚一点阻止，默认行为（如页面缩放、上下滚动）就已触发，手势就废了。
-
touchstart回调里第一行就要写e.preventDefault()，不能加任何条件判断 - 记录
e.touches[0].clientX为起点，touchmove中实时算差值，仅当水平位移 > 垂直位移 × 1.5 时才执行滑动逻辑（防误触） -
touchend后要做惯性补位：简单做法是根据速度估算最终位置，用setTimeout+scrollTo或transform调整；复杂点可用requestAnimationFrame模拟减速曲线 - iOS 15+ 要求
passive: false显式声明事件监听器，否则preventDefault()无效——注册时得写el.addEventListener('touchstart', handler, { passive: false })
别忽略 scroll-behavior 和 translate3d 的硬件加速细节
看似是锦上添花的配置，实际决定滑动是否卡顿。尤其在低端 Android 设备或微信内置 WebView 中，缺失这些容易掉帧。
-
scroll-behavior: smooth只对根容器（html）或带滚动条的容器生效，对transform动画无效；想让scrollTo平滑，必须加在对应元素上 - 用
transform: translate3d(x, y, 0)替代translateX，能强制 GPU 加速；但别滥用——每个加了translate3d的元素都会新建图层，内存占用上升 - 移动端慎用
will-change: transform，测试发现某些 Android 12+ WebView 会因此导致文字渲染模糊
最易被忽略的是事件监听器的生命周期管理：手势滑动代码若没在组件卸载/页面切换时移除 touch 监听器，容易引发内存泄漏或跨页面误触发。哪怕只是个简单 demo，也得配对写 removeEventListener。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
