抽屉打开后内容不可滚动的主因是父容器设置了 overflow: hidden 或 transform（如 translatex），导致子元素 overflow-y: auto 失效；应确保 .drawer-content 设置 overflow-y: auto，且 transform 仅作用于抽屉自身容器，避免加在 html/body 上。
抽屉打开后内容不可滚动？检查 overflow 和 transform 层级
Flex 容器设了 overflow: hidden 或父元素用了 transform（比如 translateX），会导致子元素的 overflow-y: auto 失效——这是最常被忽略的“抽屉卡死”原因。
- 确保抽屉内部滚动容器（如
.drawer-content）设置了overflow-y: auto，且其父容器没被transform截断渲染层 - 若侧边栏本身用
transform: translateX(-100%)实现隐藏，别把它加在html或body上；应只作用于抽屉自身容器（如.drawer） - 移动端 Safari 对
transform+overflow组合更敏感，可加will-change: transform强制创建独立图层
Flex 布局下抽屉宽度不随视口缩放？固定值 vs calc() 的取舍
用 width: 300px 在小屏上会撑破布局，但直接写 width: 80% 又可能太窄。Flex 本身不解决响应式宽度，得靠 CSS 媒体查询或函数兜底。
- 推荐用
max-width: 320px+flex: 0 0 auto，再配合@media (max-width: 480px)改为max-width: 100% - 避免用
calc(100vw - 60px)这类写法：iOS Safari 的vw在横屏/地址栏收起时会跳变，导致抽屉忽宽忽窄 - 如果主内容区用了
flex: 1，抽屉必须设flex: none，否则 Flex 会强行压缩它
Transform 动画卡顿或闪屏？硬件加速不是万能解
transform: translateX() 确实比 left 或 margin-left 更顺，但动画仍可能掉帧，尤其在低端安卓机上。
- 务必给抽屉容器加
backface-visibility: hidden和will-change: transform，但不要滥用——只加在动画中实际变化的元素上 - 动画时长控制在
300ms内，超过400ms用户容易感知延迟；缓动用cubic-bezier(0.34, 1.56, 0.64, 1)比ease-in-out更自然 - 别在动画过程中动态修改
height或padding，这会触发重排，直接打断 GPU 加速
点击遮罩关闭抽屉，但点击内部表单控件也关闭？事件冒泡陷阱
常见做法是给遮罩层（.overlay）绑 click 关闭，结果用户点抽屉里的 <input> 或 <select></select> 也触发关闭——因为事件冒到了遮罩上。
立即学习“前端免费学习笔记（深入）”；
- 在抽屉内容区所有可交互元素上加
onclick="event.stopPropagation()"，或统一委托到.drawer容器并判断event.target === event.currentTarget - 遮罩层必须设
pointer-events: auto，而抽屉本身不能设pointer-events: none（否则内部控件失活） - 移动端还需防 touchstart 误触发，建议用
mousedown+touchstart双绑定，或统一用click并加{ passive: false }
真正难的不是让抽屉动起来，而是让它在各种屏幕、各种输入方式、各种嵌套场景里都不“意外”。尤其是 transform 和 overflow 的交互，浏览器实现差异藏得很深，光看 MDN 不够，得真机多试几次。
