抽屉式导航必须用包裹并设aria-label，同步更新aria-expanded与class，仅用transform位移和transition，遮罩需与抽屉同级挂载body下，滚动锁定禁用overflow:hidden而用position:fixed方案。

抽屉式导航不能只靠 display: none 或 visibility: hidden 切换，否则动画失效、焦点失控、ARIA 属性不被识别——核心问题在于语义结构、渲染层控制和交互契约没对齐。

抽屉容器必须用

包裹，且设 role="navigation"

浏览器对

有隐式行为：屏幕阅读器跳过未包裹的导航内容，键盘 Tab 会直接越过整个抽屉区域。单纯用

会导致 aria-expanded 完全无效，Safari iOS 上甚至可能不触发 transform 动画。

• 是最低要求，aria-label 或 aria-labelledby 必须存在
• 不要把
  拆到外层（比如放在
  外），否则 ARIA 树层级断裂，aria-expanded 同步失效
• JS 控制开闭时，必须同步更新 aria-expanded="true/false" 和 class="is-open"，不能只改类名

transform: translateX() 是唯一可靠位移方式

用 left 或 margin-left 触发动画，会在 iOS Safari 和低端安卓 WebView 中卡顿，因为它们触发 layout 重排；transform 只走合成层，60fps 更稳。

• 初始状态写 transform: translateX(-100%)，不是 left: -100% 或 margin-left: -280px
• 过渡只写 transition: transform 0.3s cubic-bezier(0.22, 0.61, 0.36, 1)，别加 opacity 一起过渡，旧版 WebKit 可能降级为软件渲染
• 移动端 Safari 15.4 以下需在激活态加 will-change: transform 防闪屏，但不要全局加，避免性能损耗

遮罩层（overlay）必须与抽屉同级、独立定位

很多人把遮罩写成抽屉的子元素，结果点击无效、层级错乱、或被父容器 overflow: hidden 截断。遮罩本质是全屏层，必须和抽屉平级挂在 下。

HTML Text Extract

从HTML页面（URL、文件或标准输入）中提取主体内容文本，去除导航、页脚、广告和模板文本。可直接传递给readability_check或其他文本工具。

下载

• HTML 结构应为：
  ...
• 遮罩样式： position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); z-index: 999;
• 点击关闭时，必须校验 e.target === overlay，不能直接监听 overlay.click 就关——否则点抽屉内链接也会触发关闭

移动端 body 滚动锁定不能用 overflow: hidden

给 加 overflow: hidden 会让滚动条消失，页面宽度突变，“右侧内容右移”，Safari 表现尤其明显。

• 正确做法是展开时加类：body.is-drawer-open { position: fixed; top: -0px; width: 100%; }
• 同时遮罩层加 touch-action: none，防止 iOS 上下拖拽穿透触发页面滚动
• 关闭后必须立即移除该类，否则后续所有页面滚动永久失效
• 若用 React/Vue，组件卸载前要清理 class，否则内存泄漏风险真实存在

真正难的从来不是“怎么滑出来”，而是关抽屉那一瞬间：焦点是否回到触发按钮、背景内容是否真不可操作、键盘 Tab 是否被 trap 在不可见区域、动画中断后状态是否可恢复——这些细节不逐条验证，上线后必被无障碍测试和低端机用户反复打脸。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！