移动端h5抽屉拖拽需接管touch事件、用transform实现跟手位移、设阈值判定关闭/弹回，并用css transition配合贝塞尔曲线做物理回弹，同时拦截ios滚动干扰。
在移动端 H5 中实现流畅的抽屉拖拽跟手关闭与弹回动效，关键不在“模拟动画”，而在**接管触摸过程 + 精确映射位移 + 智能判定阈值 + 物理感回弹**。原生 drag API 在移动端不可用，必须基于 touchstart / touchmove / touchend 手动实现，但细节处理不到位就会卡顿、跳变或失去跟手感。
绑定触摸事件并锁定初始状态
抽屉容器（如侧边栏）需监听三个基础事件，且要防止页面整体滚动干扰：
- touchstart 中记录起始 Y（或 X，取决于抽屉方向）坐标，并保存当前 translate 值，用于后续增量计算
- touchmove 中用 e.touches[0].clientX（水平抽屉）或 clientY（垂直抽屉）实时计算偏移量，直接设置 transform: translateX() 或 translateY()
- touchend 后立即判断：若拖动距离超过阈值（如 30% 容器宽度）且速度足够，则触发关闭；否则弹回原位
- 全程对 document.body 添加 { passive: false } 并调用 event.preventDefault()，避免 iOS/Android 触发默认滚动或缩放
实现跟手拖拽的 transform 更新逻辑
不要用 left/top 或 margin 移动抽屉——它们会触发重排，卡顿明显。必须用 CSS transform + will-change:
- 抽屉元素加 style="transform: translateX(0); will-change: transform;"
- touchmove 中只更新 transform 值，例如：element.style.transform = `translateX(${currentX}px)`
- currentX = startX + moveDelta，但需限制最大拖动范围（如 -100% 到 0），避免拉脱
- 为提升响应，可配合 requestAnimationFrame 包裹 transform 更新，但非必需；多数场景直接赋值已足够顺滑
弹回动效要用 CSS transition + 动态 duration
松手后的弹回不能靠 JS 循环 setTimeout，应交由浏览器合成线程处理：
- touchend 后，根据拖动距离和释放瞬间速度（可通过 last two touch points 估算），决定最终目标位置（完全关闭 or 完全展开）
- 动态设置 transition：例如 element.style.transition = 'transform 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94)' —— 这个贝塞尔曲线模拟真实弹性感
- 再设置目标 transform，浏览器自动执行平滑过渡
- transition 结束后，清理内联 transition 样式，避免影响下一次拖拽
适配 iOS 回弹干扰与滚动穿透
iOS 的 scroll bounce 和 body 滚动会破坏抽屉体验，必须主动拦截：
- 抽屉打开时，给 body 加 style="position: fixed; width: 100%; top: -${window.scrollY}px"，并记录 scrollTop，关闭时恢复
- 禁用 iOS 默认回弹：对抽屉容器设 overscroll-behavior: contain（现代 iOS 支持），或用 overflow: hidden 封装内部内容
- 避免使用 -webkit-overflow-scrolling: touch —— 它在 iOS 12–14 会导致滚动失真和回弹失效
- 若抽屉内含可滚动区域（如长列表），需单独启用局部滚动，不把 touchmove 事件冒泡到抽屉层
