原生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 事件拦截极严，稍晚一点阻止，默认行为（如页面缩放、上下滚动）就已触发，手势就废了。

Article To Html

文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。

下载

立即学习“前端免费学习笔记（深入）”；

• 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。