最稳妥的右侧抽屉实现是用 transform: translatex() 配合 transition，容器设 fixed/absolute、不占文档流，通过 class 切换显隐，配合 body 滚动禁用、内容区独立滚动及无障碍关闭按钮。
用 CSS transform 实现右侧抽屉，不依赖 JS 控制显隐
纯 CSS 实现右侧弹出面板最稳妥的方式是用 transform: translateX() 配合 transition，避免重排且兼容性好（IE10+）。关键不是“加个 div 往右一推”，而是确保它不破坏文档流、不遮挡主体内容的可滚动区域。
实操建议：
- 抽屉容器设为
position: fixed或position: absolute，top: 0; right: 0; height: 100vh;，宽度单独设（如width: 320px） - 用
transform: translateX(100%)初始隐藏，transform: translateX(0)显现，配合transition: transform 0.3s ease - 主体内容需加
overflow-x: hidden，否则抽屉出现时页面可能横向滚动 - 别用
display: none切换——会导致 transition 失效；也别用visibility: hidden，它不释放空间，键盘焦点和屏幕阅读器仍能访问
点击按钮触发抽屉，JS 只负责切 class，不操作样式属性
把显隐逻辑交给 class 切换，而不是在 JS 里写 element.style.transform = '...'，这样更易维护、可测试，也方便后续加动画库或响应式断点。
常见错误现象：
- 点击后抽屉闪一下才出现 → JS 执行时机早于样式加载，或 class 添加后未触发重绘（加
force reflow不推荐，改用setTimeout(..., 0)或监听transitionend更稳妥） - 多次快速点击导致抽屉卡在半开状态 → 没禁用按钮或没清 transition 中的状态，应在
transitionstart时加pointer-events: none到触发按钮 - 移动端点击无反应 → 按钮缺少
cursor: pointer和touch-action: manipulation，iOS Safari 对非可点击元素的 tap 有延迟
抽屉内容滚动独立，不影响背景页面滚动
右侧抽屉常要放长列表或表单，必须保证它内部可滚动，同时背景页面不能跟着动。这不是加个 overflow-y: auto 就完事——父级 fixed 容器高度算错、未限制最大高度、或未处理 iOS 滚动穿透，都会翻车。
实操要点：
- 抽屉内容区设
max-height: calc(100vh - 64px)（减去 header 高度），再配overflow-y: auto - iOS 上需额外加
-webkit-overflow-scrolling: touch启用弹性滚动 - 打开抽屉时给
加class="drawer-open"，并设body.drawer-open { overflow: hidden; }，否则背景页仍可滚（仅靠position: fixed抽屉不够） - 别用
overscroll-behavior: contain试图一劳永逸——它在 Safari 15.4 之前不支持，且对嵌套滚动控制不稳
关闭按钮放哪？用 × 还是「返回」文字更合适
位置比样式更重要。右上角 × 图标是用户心智模型里的标准关闭入口，但必须满足两个条件：可聚焦、有明确语义。
使用场景与细节：
- 必须用
<button type="button"></button>，不能用<div> 或伪元素模拟，否则键盘用户无法 <code>Tab进入、屏幕阅读器读不出功能 - 图标用 UTF-8 字符
×即可，无需图标字体或 SVG；若用 SVG，务必加aria-hidden="true"并配<span class="sr-only">关闭面板</span> - 移动端建议在左上角再加一个「返回」文字按钮（尤其历史栈较深时），× 图标容易误触，且部分用户不理解其含义
- 按
Esc键关闭是基本预期，JS 中监听keydown时只响应event.key === 'Escape'，别用keyCode
抽屉结构看着简单，真正难的是滚动行为、焦点管理、键盘导航和移动适配这四点交叉影响——任意一点没对齐，用户就会卡住或迷失。别等全做完再测，从第一个按钮点击开始就该用键盘 + 屏幕阅读器过一遍。
