抽屉菜单应使用 display: none 而非 visibility: hidden 或 opacity: 0，因前者彻底移出文档流，避免布局跳动与可访问性问题；纯 css 方案依赖 :checked 伪类与兄弟选择器控制显隐，配合 body 滚动锁定、transform 动画及焦点管理确保体验健壮。
抽屉菜单用 display: none 还是 visibility: hidden？
两者都“看不见”，但行为完全不同：display: none 会彻底从文档流中移除元素，不占空间，适合真正“关闭”抽屉；visibility: hidden 只隐藏视觉，仍占布局位置，抽屉展开时可能跳动或遮挡错位。实际做抽屉必须用 display: none 控制显隐，否则点击触发后定位、动画、焦点管理全乱套。
常见错误是用 opacity: 0 配合 pointer-events: none 模拟隐藏——这会让屏幕阅读器仍能访问、键盘 Tab 仍可聚焦，不符合可访问性要求。
如何用纯 CSS 实现无 JS 的抽屉切换？
靠 :checked 伪类 + 隐藏的 <input type="checkbox"> 最稳妥。不需要监听 click、不依赖 JS 加载顺序，兼容性好（IE9+），且天然支持键盘空格切换。
- 把
<input id="drawer-toggle" type="checkbox">放在抽屉容器之前（DOM 顺序决定 ~ 选择器能否生效） - 抽屉容器用
<aside class="drawer"></aside>，并紧跟<label for="drawer-toggle"></label>做开关按钮 - CSS 中写
#drawer-toggle:checked ~ .drawer { display: block; }，注意是~（兄弟选择器），不是> - 移动端需加
touch-action: manipulation防止 300ms 延迟
抽屉内容区域怎么避免滚动穿透？
抽屉弹出时，背后页面还在滚动，用户手指一滑就关掉菜单——这是 body 滚动没锁住导致的。不能只靠 overflow: hidden 简单加在 body 上，iOS Safari 会忽略，且可能影响固定定位元素。
正确做法：
- 抽屉打开时，给
body加class="drawer-open"，CSS 定义.drawer-open { overflow: hidden; height: 100vh; } - 同时抽屉内部用
max-height: 80vh; overflow-y: auto;，确保内容可滚动但不撑开 body - 务必监听
keydownEsc 键关闭，并同步移除drawer-open类，否则键盘用户会被困住
为什么 transform: translateX() 比 left 更适合抽屉动画？
left 触发 layout + paint，动画卡顿明显；transform 只影响合成层，GPU 加速，60fps 有保障。尤其在低端安卓机或微信内置浏览器里，差别肉眼可见。
实操要点：
- 抽屉默认设
transform: translateX(-100%);，展开时改为transform: translateX(0); - 必须加
transition: transform 0.3s ease-in-out;，别忘了will-change: transform;提前告知浏览器优化 - 不要用
translateX(-100vw)——某些浏览器下 vw 计算不准，抽屉可能露白边或留缝隙，坚持用百分比
抽屉菜单真正的难点不在“怎么出现”，而在“怎么不出错”：焦点管理是否连贯、屏幕阅读器能否正确 announce、手势关闭是否响应及时、小屏下触摸热区是否足够大。这些细节没处理好，再酷的动画也只是摆设。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
