侧滑菜单容器必须是body的直接子元素；定位用position: fixed并设top/right/height；overflow-x: hidden需同时加在html和body上；显隐用transform class控制，禁用display/visibility；需手动处理滚动穿透和遮罩层。
侧滑菜单容器必须与 body 平级，不能嵌套在 main 或 section 里
常见错误是把抽屉 div 写在主内容区域内部，比如塞进 <main></main> 或 <article></article> 里。这会导致 z-index 失效、滚动穿透控制失灵，且 iOS Safari 中极易触发页面缩放或底部白边。
正确结构只有一条硬规则：抽屉容器必须是 body 的直接子元素。它和主内容同级，彼此不嵌套：
<body> <div class="main-content"></div> <div class="drawer drawer-closed"></div> <!-- ✅ 正确 --> </body>
-
position: fixed是唯一稳妥的定位方式；absolute只有在父容器明确设position: relative且高度可控时才勉强可用 - 必须显式声明
top: 0、right: 0、height: 100vh（不是100%），否则小屏下会截断 - 宽度单独设死，如
width: 320px；避免用max-width或flex自适应，容易撑破视口
overflow-x: hidden 必须加在 html 或 body 上，而不是抽屉父容器
很多人把 overflow-x: hidden 写在抽屉本身或它的 wrapper 上，结果关闭时页面仍能水平滚动——这是因为浏览器把负位移区域当作了可滚动内容区。
真正起作用的是根级容器的溢出控制：
立即学习“前端免费学习笔记（深入）”；
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
html, body {
overflow-x: hidden;
height: 100%;
}- 仅对
body加无效，iOS Safari 会忽略；必须连同html一起设 - 别用
overflow: hidden（含y方向），否则会禁用页面垂直滚动 - 如果用了自定义滚动库（如
simplebar），需额外检查其是否覆盖了根级溢出行为
显隐切换必须用 class 控制 transform，禁用 display: none 和内联 style
用 element.style.transform = 'translateX(0)' 直接操作样式，会导致动画曲线无法复用、响应式断点失效、无障碍焦点管理失控。
标准做法是交由 CSS class 控制状态：
.drawer {
transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.drawer-closed {
transform: translateX(100%);
}
.drawer-open {
transform: translateX(0);
}- 初始状态加
class="drawer drawer-closed"，JS 只做classList.toggle('drawer-open') - 绝对不要用
display: none切换——它会让transition立刻中断 -
visibility: hidden也不行：键盘焦点仍能进入，屏幕阅读器会读出隐藏内容 - 快速连点易导致 transition 堆叠，可在
transitionstart事件中临时禁用按钮pointer-events
遮罩层和滚动穿透必须手动处理，overscroll-behavior 不解决这个问题
抽屉打开时，背景内容默认仍可滚动，用户一划就翻页，体验断裂。这不是靠 overscroll-behavior: contain 能解决的——它只管边界回弹，不管滚动穿透。
必须组合两步：
- 抽屉打开时，给
body加class="no-scroll"，CSS 中写body.no-scroll { overflow: hidden; } - 遮罩层
.overlay需设position: fixed、inset: 0、z-index比抽屉低但高于主内容 - 点击遮罩层关闭抽屉时，务必在 handler 中调用
e.stopPropagation()，否则会同时触发 document 点击关闭逻辑 - iOS Safari 对
touch-action: manipulation敏感，按钮必须显式声明该属性，否则响应延迟明显
抽屉菜单真正的难点不在动画本身，而在它和页面其他交互模块（滚动、焦点、缩放、视口约束）之间的耦合关系。一个没设 html { overflow-x: hidden } 的页面，哪怕动画再顺，关抽屉时也会偏移；一个没处理 pointer-events 的按钮，连点三次后抽屉就卡在半途。这些细节不写进 DOM 结构和初始 CSS，光靠 JS 补救基本无效。
