scroll-behavior: smooth 无法实现移动端标签页“回弹切换”，因其仅控制页面级滚动动画，不接管标签面板显隐或位移逻辑，且不参与拖拽松手后的惯性减速过程。
为什么移动端标签页“回弹切换”不能靠 scroll-behavior
因为 scroll-behavior: smooth 作用于根滚动容器（html 元素），它只控制整个页面级的纵向/横向滚动动画，**不接管单个标签面板的显隐或位移逻辑**。你在标签页里点按钮触发 window.scrollTo，只会让视口滑动，和“标签内容滑入+弹性收尾”是两回事。所谓“回弹”，本质是用户拖拽后松手时系统自动执行的惯性减速——这只能由原生 touch 滚动或手动 transform + 物理模拟实现，scroll-behavior 完全不参与这个过程。
用 touchstart/move/end 实现带回弹的标签滑动
这是目前唯一能还原 iOS/Android 原生“拖拽-松手-回弹”手感的方式，核心不是滚动，而是用 transform: translateX() 驱动位移，并在 touchend 后根据速度和偏移量决定是否切页或回弹。
-
touchstart中立即调用e.preventDefault()，并记录e.touches[0].clientX -
touchmove中只计算横向偏移差值，不直接设style.transform；避免高频 DOM 写入导致卡顿 -
touchend后，若Math.abs(offset) > slideWidth * 0.3（slideWidth动态读取），则切页；否则用requestAnimationFrame平滑过渡回原位 - 容器必须加
touch-action: pan-y，否则浏览器会拦截横向 touch 事件 - 别在
touchmove里调scrollTo—— 它会中断手势，导致“卡住”或跳变
用 CSS scroll-snap 实现轻量对齐，但无回弹
如果你只需要“滑到哪停在哪”的硬对齐，不用模拟惯性，scroll-snap 是最轻量方案：给容器设 overflow-x: auto、scroll-snap-type: x mandatory，每个标签页设 scroll-snap-align: start。但它**不提供任何回弹效果**，松手即停，且 iOS Safari 15.4 之前兼容性差，Android WebView 表现也不稳定。实际项目中，它更适合横向商品列表，而非需要拟物反馈的标签页。
实现 Markdown↔ HTML 互转，支持导出 PDF，用于用户请求的文档格式转换。
容易被忽略的三个细节
一是 transform 切换必须配 will-change: transform，否则低端 Android 设备动画掉帧明显；二是所有标签页容器要用 position: absolute 叠放，否则 translateX 会引发重排；三是手动滑动后，如果还挂着自动轮播定时器，必须清空并重置，否则状态错乱——比如用户刚滑到第 3 页，定时器却在 2 秒后强行切回第 2 页。
立即学习“前端免费学习笔记（深入）”；
