抽屉菜单用 position: fixed 时页面横向滚动，是因为负 left 值将移出区域计入布局宽度；应改用 transform: translateX() 配合 width: 100vw 控制显隐，避免触发重排和扩大布局尺寸。
抽屉菜单用 position: fixed 时，为什么页面会横向滚动？
因为 fixed 元素脱离文档流，但默认宽度仍按视口计算；当给它设了 left: -100% 或 left: -300px，浏览器会把“移出屏幕”的部分算进页面总宽度，触发横向滚动条。
- 解决办法不是加
overflow-x: hidden到body（治标不治本，可能影响其他 fixed 元素） - 真正该做的是：给抽屉容器加
width: 100vw，再配合left: 0和transform: translateX(-100%)控制显隐 - 避免用
left负值位移，改用transform—— 它不触发重排，且不会扩大布局尺寸
如何让抽屉菜单在移动端滑入、桌面端常驻？
靠媒体查询切换行为，但关键不在“显示/隐藏”，而在“交互方式是否启用”。
- 小屏下：抽屉默认
transform: translateX(-100%)，点击按钮加transform: translateX(0)，同时给body加overflow: hidden防止背景滚动 - 大屏下：抽屉设为
transform: translateX(0)且固定宽度（如width: 260px），不响应按钮点击，也不锁body - 别用
display: none切换抽屉——会导致焦点丢失、动画中断、SSR 不友好
transform 动画卡顿？检查这三件事
抽屉滑入滑出用 transform 本该丝滑，但实际常卡，多数是渲染层没提上去或触发了 layout。
- 强制开启硬件加速：
will-change: transform或transform: translateZ(0)（仅对频繁动画的元素加，别滥用） - 确保抽屉父容器没有
overflow: hidden且自身没设置border-radius或box-shadow（这些会让 GPU 层合并失败） - 动画时长别低于
120ms—— 太快人眼难感知，还容易因帧率抖动显得卡；推荐transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1)
点击遮罩层关闭抽屉，为什么有时点不中？
遮罩层（.overlay）通常用 position: fixed; top: 0; left: 0; width: 100%; height: 100%，但失效往往是因为 z-index 或 pointer-events。
立即学习“前端免费学习笔记（深入）”；
- 确认遮罩层的
z-index确实高于抽屉内容，但低于抽屉头部（如有关闭按钮）——常见错误是全设成9999，结果按钮被盖住 - 如果抽屉里用了
iframe或第三方组件，它们可能自带pointer-events: none，得手动重置 - 更稳妥的关闭方式：监听遮罩层的
click，同时在抽屉内部调用event.stopPropagation()，而不是依赖层级遮挡
Esc 是否响应、屏幕旋转后尺寸重算是否及时。这些地方一漏，用户就会觉得“菜单不听话”。 
