HTML 中没有原生 <drawer> 标签，所谓抽屉是用 <div> 模拟的组件，需 CSS 定位动画 + JS 监听 touch 事件实现侧滑手势，无法仅靠 HTML 或纯 CSS 完成。
HTML 抽屉本身不支持原生侧滑手势（比如手指从屏幕边缘拖出），必须靠 CSS + JavaScript 自行实现滑动逻辑或监听 touch 事件 —— 这不是 bug，是标准行为。
为什么 Drawer 元素在 HTML 中根本不存在
目前（2026 年）HTML 标准里没有 <drawer> 或 <sidebar> 原生标签。所谓“HTML 抽屉”实际是开发者用 <div> 模拟的 UI 组件，依赖 CSS 定位 + transform / left 动画 + JS 控制显隐。浏览器不会自动给它加边缘滑动手势支持。
- Material Design 规范里的
Drawer是 MDC-Web 或第三方库（如@material/drawer）封装的组件，不是 HTML 原生能力 - 部分低代码平台（如盘古）提供的「抽屉」是运行时注入的 DOM + 事件绑定，底层仍是
div+touchstart/touchmove - 直接写
<drawer></drawer>在任何浏览器都会被忽略为未知标签，不渲染也不触发行为
touchstart + touchmove 手势识别必须自己写
想让抽屉响应从右向左滑入（比如右滑呼出侧边栏），不能只靠 click，得监听触摸事件并计算位移方向与距离。关键点不在“有没有 API”，而在“怎么判断有效滑动”。
- 在
touchstart记录初始clientX；touchmove中实时计算 delta = 当前 X - 起始 X - 只在 delta > 30px 且起始位置靠近屏幕右侧（例如
startX > window.innerWidth * 0.8）时才触发抽屉展开 - 必须调用
event.preventDefault()阻止页面滚动干扰，否则 iOS 上容易误触发回弹 - 收起时同理：监听从左向右滑动，且抽屉当前处于展开态（
classList.contains('drawer-open')）
用 checkbox hack 实现无 JS 侧滑？有严重限制
纯 CSS 的 checkbox hack 确实能做出点击展开/收起效果，但它完全无法响应手势滑动 —— 因为没有 JS 就没法读取 touch 坐标，更没法动态更新 left 值做过渡动画。
立即学习“前端免费学习笔记（深入）”；
- 适用场景仅限：按钮点击触发、不需要手势、不关心移动端体验一致性
- 一旦用户想“半途放弃滑动”，
checkbox只能全开或全关，做不到“松手回弹”或“滑到一半停住” - 无法监听
transitionend做后续逻辑（比如加载菜单数据），因为状态切换是 CSS 驱动的 - Android WebView 和部分旧版 Safari 对
:checked ~ .drawer的渲染有延迟或失效问题
推荐组合：CSS transform + classList + 最小化 touch 逻辑
最稳妥的做法是放弃“全自动手势识别”，用轻量 JS 控制开关，再用 CSS 处理动画和定位。这样既兼容老浏览器，又避免手势逻辑写崩。
- 抽屉容器设
position: fixed; top: 0; right: 0; width: 280px; transform: translateX(100%); transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1); - 展开时加 class：
drawer.classList.add('drawer-open')，对应 CSS 中.drawer-open { transform: translateX(0); } - 手势只做“开关触发器”：在
touchend里判断滑动距离是否超过阈值（如 50px），满足则toggleclass；不满足则忽略 - 务必加
pointer-events: none到遮罩层上，防止遮罩拦截抽屉内的按钮点击
真正难的不是“怎么让它动起来”，而是“怎么让它在各种屏幕尺寸、不同 touch 设备、页面滚动嵌套下都稳定响应”。这些细节没处理好，用户一滑就卡顿、错位或失焦，比没手势还糟。
