抽屉菜单HTML结构应为body下平级排列主内容、遮罩层和抽屉容器，遮罩须置于抽屉之前以拦截点击，抽屉用transform: translateX()控制显隐并配合will-change优化，同时需冻结body滚动且确保抽屉内可滚动。
抽屉菜单的 HTML 结构怎么搭才不踩坑
移动端抽屉菜单本质是「遮罩层 + 侧边内容块」的叠加关系，结构必须保证 body 不滚动、抽屉内容可滚动、且遮罩层能正确拦截底层点击。常见错误是把 nav 直接塞进 body 最后，导致 z-index 层级混乱或触发 iOS Safari 的弹性滚动穿透。
- 抽屉容器（
.drawer）应作为body的直接子元素，和主内容平级 - 主内容区（
.main-content）需加position: relative，方便后续用 transform 推开 - 遮罩层（
.drawer-overlay）必须放在抽屉内容之前，否则点击穿透无法拦截
<body> <div class="main-content">...</div> <div class="drawer-overlay"></div> <nav class="drawer">...</nav> </body>
用 transform 还是 left 控制抽屉显隐
用 transform: translateX() 是唯一推荐方式。iOS Safari 对 left + transition 的动画支持不稳定，尤其在快速开关时会卡顿或跳帧；而 transform 触发 GPU 加速，且不会触发重排（reflow），性能更可控。
- 开启状态：设
transform: translateX(0) - 关闭状态：设
transform: translateX(-100%)（注意是负值，且单位用 %） - 必须配合
will-change: transform提前告知浏览器该元素将变化（尤其在低端 Android 上能减少闪烁）
不要用 display: none 切换——它会导致 DOM 重绘延迟，用户点开按钮后有明显卡顿感。
如何阻止背景内容滚动又不破坏可访问性
抽屉打开时，禁止 body 滚动不能只靠 overflow: hidden。iOS Safari 下这会导致页面瞬间回滚到顶部，且屏幕阅读器可能丢失焦点。
立即学习“前端免费学习笔记（深入）”；
- 正确做法：抽屉打开时记录当前
scrollY，给body加position: fixed; top: -$scrollYpx，关闭时还原 - 同时设置
body { overscroll-behavior: none }，防止下拉触发刷新或滚动穿透 - 抽屉内部内容必须独立设置
overflow-y: auto和-webkit-overflow-scrolling: touch（iOS 旧版必需）
遗漏 -webkit-overflow-scrolling: touch 会导致 iOS 上抽屉内列表滑动生涩、回弹异常。
点击遮罩关闭抽屉时为什么有时没反应
根本原因是事件冒泡被意外阻止，或遮罩层未真正覆盖全屏。常见陷阱：
- 遮罩层高度仅设
100vh，但页面内容高度超过视口时，底部区域点不到 - 解决：遮罩层用
position: fixed; top: 0; left: 0; width: 100%; height: 100%，并确保z-index高于抽屉内容但低于抽屉本身（典型值：overlay=100，drawer=101） - 抽屉内容里用了
pointer-events: none（比如为了透出背景效果），结果连遮罩也失效了 - JavaScript 绑定
click时没用event.stopPropagation()，导致点击菜单项也触发了遮罩关闭
最稳妥的关闭逻辑是：遮罩层监听 click，抽屉内容区域监听 click 并调用 event.stopPropagation()。
抽屉菜单看似简单，但 iOS 滚动行为、遮罩层级、transform 动画触发时机这几个点，任何一个没对齐就容易在真机上出问题。别依赖“看起来能动”，一定要在 Safari 和 Chrome for Android 上实测滑动和开关响应。
