抽屉式侧边栏需精准控制触发时机与过渡边界，优先用 transform: translateX() 替代 left 实现高性能动画，配合 fixed 宽度、transition 和合成层优化；打开时通过 position: fixed + overflow: hidden 锁定 body 并启用侧边栏独立滚动；点击遮罩关闭时须阻止事件冒泡。
抽屉式侧边栏不是靠 position: fixed 硬顶就能稳住的，关键在「触发时机」和「过渡边界控制」——尤其当页面有滚动、侧边栏内容可滚动、或需要适配移动端时，漏掉一个 overflow 或写错 transform 的触发条件，就会出现遮挡、滚动穿透、动画卡顿这三类高频问题。
用 transform 位移比 left/right 更可靠
直接改 left 值会触发重排（reflow），动画容易掉帧；transform: translateX() 走合成层，性能好，且能规避 Safari 下 overflow: hidden 失效的问题。
常见错误是把 translateX 写成百分比值（如 translateX(100%)），但父容器宽度不固定时，100% 含义模糊。稳妥做法是用 max-width 配合固定像素位移：
- 给侧边栏设固定宽，比如
width: 300px - 关闭状态用
transform: translateX(-300px) - 开启状态用
transform: translateX(0) - 必须加
transition: transform 0.3s ease-in-out，否则无动画
防止背景页滚动穿透的两个必要操作
抽屉打开时，用户手指在侧边栏上滑动，背景页跟着滚——这是 iOS 和部分 Android 的默认行为，不是 bug，是浏览器对 body 滚动的默认响应。
解决它不能只靠 overflow: hidden，因为：
-
body { overflow: hidden }在 iOS 上可能被忽略（尤其 Safari 15+） - 若侧边栏自身需滚动，
body锁死但侧边栏没设overflow-y: auto，内容就截断了
正确做法是：
- 抽屉打开时，给
body加class="drawer-open" - CSS 中写：
.drawer-open { position: fixed; width: 100%; height: 100%; overflow: hidden; } - 同时给侧边栏容器设
overflow-y: auto，并确保其高度撑满视口（height: 100vh或min-height: 100vh）
点击遮罩层关闭时，别忘了处理事件冒泡
遮罩层（overlay）通常放在侧边栏同级，z-index 低于侧边栏但高于主内容。用户点遮罩关闭抽屉，但如果侧边栏内部有按钮、链接，点它们时也触发了遮罩的 click，就会误关。
必须阻止事件冒泡：
sidebar.addEventListener('click', e => e.stopPropagation());
overlay.addEventListener('click', () => {
sidebar.classList.remove('open');
document.body.classList.remove('drawer-open');
});
注意：如果侧边栏用了 React/Vue，别在组件根节点上直接绑 @click 关闭逻辑，要明确区分「遮罩点击」和「侧边栏内部点击」。
最常被忽略的是 transform 的硬件加速触发条件——必须确保侧边栏元素有独立的合成层（比如加 will-change: transform 或 backface-visibility: hidden），否则某些低端安卓机上动画仍会卡顿。这不是锦上添花，是上线前必验的一环。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
