HTML抽屉需CSS+JS实现侧滑，因原生<dialog>无touch事件监听能力，纯CSS方案仅支持点击；侧滑是连续交互，须在touchstart→move→end全流程计算位移并用transform实时更新，配合velocity判断松手行为与阻尼回弹。
HTML抽屉本身不内置侧滑手势支持，必须靠 CSS + JS 主动实现侧滑逻辑，否则只会响应点击，不会跟随手指拖拽。
为什么原生 <dialog> 或纯 CSS 抽屉不能侧滑
浏览器原生的 <dialog> 元素只提供 show() / close() 控制，无 touchmove 监听能力；而纯 CSS 的 checkbox hack 或 class 切换方案，仅响应 click/tap 事件，无法读取拖拽距离、速度、方向等信息。侧滑（swipe）是连续交互，需要在 touchstart → touchmove → touchend 全流程中计算位移并实时更新 transform。
- 侧滑面板本质是「位置可中断的过渡」，不是「开/关二态切换」
- 若只用
left或margin-left动画，拖拽时会卡顿、跳变，因 layout 触发重排 - 必须用
transform: translateX()+will-change: transform才能保证 60fps
touchmove 中如何安全计算滑动偏移
关键不是“监听 move”，而是“隔离干扰、防误触、兼容 scroll”。常见错误是直接绑定 document.addEventListener('touchmove', ...)，结果页面其他区域无法滚动。
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 只对抽屉容器（如
.drawer）及其触发按钮绑定touchstart，记录初始clientX - 在
touchmove中只处理该次触摸的touches[0].clientX，避免多点触控干扰 - 滑动阈值建议设为
10px，小于该值视为 tap，不阻止默认行为；大于则调用event.preventDefault() - 移动端需加
touch-action: none到抽屉容器上，否则 iOS Safari 会抢走 touch 事件
侧滑结束时怎么判断是「松手关闭」还是「松手打开」
不能只看最终位移，还要结合拖拽速度（velocity）。单纯位移 > 50% 宽度就打开，会导致慢速拖到一半松手后自动弹开，体验反直觉。
立即学习“前端免费学习笔记（深入）”；
- 记录
touchstart和touchend时间戳，算出持续时间 - 用
(currentX - startX) / (endTime - startTime)算出平均速度（px/ms） - 若速度绝对值 >
0.3且位移 >40px，按方向执行惯性动画；否则回弹到最近状态（开/关） - 回弹动画必须用
transition-timing-function: cubic-bezier(.22, .61, .36, 1)，模拟物理阻尼
真正难的不是让抽屉动起来，而是让它「像物理对象一样响应手指」：有起始阻力、拖拽跟随、松手预判、惯性滑行、边界吸附。这些细节不写死在 JS 里，光靠 CSS 是做不到的。
