移动端抽屉导航应使用 transform: translatex() + transition 实现无重排动画，设 fixed 定位、overflow-y: auto 和 overscroll-behavior: contain，并通过同级遮罩层与合理 z-index/pointer-events 控制事件穿透。
用 transform + transition 控制抽屉位移和动画
移动端抽屉导航的核心是「不重排、低开销」的显隐控制，transform: translateX() 是最稳妥的选择。别用 display: none 或 visibility: hidden 切换，它们会中断 transition；也别依赖 left 或 margin-left，这些触发布局重排，滑动卡顿明显。
关键实操点：
- 抽屉容器设
position: fixed（或absolute），宽高撑满视口，top: 0; left: 0; - 默认状态：
transform: translateX(-100%);（完全左移隐藏） - 展开状态：
transform: translateX(0);，配合transition: transform 0.3s ease-in-out; - 务必加
will-change: transform;（尤其 iOS Safari），避免首帧掉帧
如何让抽屉内容自适应宽度且不破坏滚动？
抽屉常被写成固定宽度（如 width: 280px），但“自适应”不是指宽度随屏幕变，而是内容不溢出、文字不折断、滚动区域独立。问题多出在父容器未隔离 overflow。
必须处理的细节：
- 抽屉根元素设
overflow-y: auto; overscroll-behavior: contain;（防页面联动滚动） - 内部内容区用
min-width: max-content;配合white-space: nowrap;可防按钮/菜单项被压缩变形 - 若含长文本，用
word-break: break-word;而非break-all，避免在单词中间断行 - iOS 上需额外加
-webkit-overflow-scrolling: touch;（仅 Safari 旧版本需要，iOS 16+ 已可省略）
点击遮罩层关闭抽屉时，如何避免误触内部链接？
常见错误是给遮罩层（.overlay）加 z-index 后，所有子元素都继承了该层叠上下文，导致抽屉里的 a 标签点击无响应——其实是事件被遮罩层拦截了。
正确做法：
- 遮罩层与抽屉容器同级，都作为 body 直接子元素：
<div class="drawer"></div> <div class="overlay"></div> - 抽屉容器设更高
z-index（如z-index: 1001），遮罩层设稍低（如z-index: 1000） - 遮罩层只负责关闭逻辑，不捕获内部事件：加
pointer-events: auto;，同时确保抽屉内元素没设pointer-events: none - 监听遮罩层
click时，用event.target === overlayEl判断是否点在空白处，而非用stopPropagation
纯 CSS 实现「打开时禁用背景滚动」的兼容写法
很多人用 JS 动态加 body { overflow: hidden; }，但纯 CSS 方案更轻量且无 JS 依赖。本质是利用 overscroll-behavior 和层叠关系隔离滚动链。
可行组合：
- 抽屉容器上设
overscroll-behavior: none;（Chrome/Firefox/Safari 均支持） - 遮罩层加
touch-action: none;，防止 iOS 下拖拽穿透到背景 - 如果仍出现背景微动，补一句
body { position: relative; }（修复某些 Android WebView 的定位 bug） - 注意：Safari 15.4 之前不支持
overscroll-behavior，此时需降级为 JS 控制body.style.overflow = 'hidden'，但纯 CSS 场景下可忽略该版本
抽屉动画的平滑度，90% 取决于是否避开重排和是否启用合成层；剩下 10% 在于遮罩层和内容层的事件穿透边界是否划清——这两个地方一错，用户就会觉得“卡”或者“点不中”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
