抽屉菜单最稳方案是用 transform: translateX() 实现滑动，配合 is-open 类控制状态、body overflow: hidden 禁滚动、aria-hidden 保障可访问性、fixed 定位防截断、prefers-reduced-motion 适配动画偏好。

抽屉菜单用 transform: translateX() 最稳

直接改 left 或 margin-left 会触发重排，动画卡顿；transform 只走合成器，GPU 加速，滑动顺滑。别用 display: none 控制显隐——它无法过渡，会导致突兀闪现。

关键点：

• 侧边栏初始设 transform: translateX(-100%)（完全左移出屏）
• 主内容区加 transition: transform 0.3s ease，菜单展开时向右平移腾出空间
• 用一个布尔类名（如 is-open）统一控制两侧状态，避免 JS 多处操作样式
• 记得加 will-change: transform 提前提示浏览器优化（尤其在低端安卓 WebView 中明显）

移动端必须处理 touch 和键盘焦点穿透

抽屉打开后，背后内容仍可被点击、滚动，甚至键盘 Tab 能跳进隐藏菜单——这违反可访问性（a11y），也容易误触。

实操建议：

• 抽屉激活时，给 加 overflow: hidden，禁用背景滚动
• 用 aria-hidden="true" 动态标记主内容区，同时设 aria-hidden="false" 给当前可见的菜单
• 监听 keydown，当菜单打开时，拦截 Escape 关闭，且限制 Tab 键只在菜单内循环（用 document.querySelectorAll("a, button, [tabindex]") 手动管理焦点）
• 别忽略 touchmove：iOS Safari 滑动穿透严重，需在菜单上加 touch-action: none

position: fixed 是侧边栏定位的底线选择

用 absolute 容易被父容器 overflow: hidden 截断；用 sticky 在滚动时行为不可控；只有 fixed 能确保菜单始终贴左、不随页面滚动偏移，且层级独立。

HTML Text Extract

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

下载

注意细节：

• 设 top: 0; bottom: 0; left: 0; width: 280px（别用百分比宽度，iOS Safari 对 vw 计算有延迟）
• z-index 至少设到 1000 以上，避开框架默认值（比如 Bootstrap 的 1050）
• 如果页面有固定头部，菜单需 top: var(--header-height)，并用 CSS 自定义属性同步高度，避免 JS 硬编码
• 关闭按钮必须放在菜单内部，且 position: absolute; top: 1rem; right: 1rem，否则在小屏上可能被截掉

用 prefers-reduced-motion 尊重用户系统设置

不少用户在系统里开了“减少动画”，但网页抽屉仍强行滑动，会造成眩晕或不适。这不是锦上添花，是合规刚需。

做法很简单：

• 在 CSS 里用 @media (prefers-reduced-motion: reduce) 块包裹所有 transition 和 transform 动画声明
• 里面直接写 transition: none 和 transform: none，让菜单瞬间显隐
• JS 层面不要覆盖这个媒体查询逻辑——哪怕你用 requestAnimationFrame 手写动画，也得先检测 window.matchMedia("(prefers-reduced-motion: reduce)").matches

真正难的不是实现滑动，而是滑动发生时，页面其他部分是否还稳、是否还能被正确读取、是否尊重了用户设备的真实约束。这些地方一漏，菜单就从交互亮点变成体验破口。

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