最稳方案是用 transform: translatex() 控制侧边栏显隐，配合 js 切换类、body 锁溢出、touch-action: pan-x 处理触摸拖拽。
侧边栏抽屉用 transform: translateX() 最稳
直接用 transform: translateX() 控制侧边栏显隐，比改 left 或 margin-left 更流畅、不触发重排。浏览器对 transform 的硬件加速支持成熟，滚动/动画时掉帧概率低。
常见错误是用 display: none 切换——会导致 DOM 突然消失，无法加过渡；或用 opacity 单独控制——元素仍占位、可点击，交互逻辑容易出错。
- 抽屉默认状态设为
transform: translateX(-100%)（完全左移隐藏） - 激活时改为
transform: translateX(0)，配合transition: transform 0.3s ease - 必须给抽屉容器设固定宽度（如
width: 280px），否则translateX(-100%)行为不可控 - 别忘了加
will-change: transform（可选，对长列表或低端设备有帮助）
响应式断点要和媒体查询解耦
抽屉是否启用，不该由 @media 直接控制显隐，而应靠 JS 切换一个 class，再让 CSS 响应这个状态。否则在平板横竖屏切换时，纯 CSS 方案容易因媒体查询滞后导致抽屉卡在半开状态。
典型场景：桌面端显示常驻侧边栏，移动端才启用抽屉。但用户旋转 iPad，视口宽度瞬间变化，若只靠媒体查询开关 transform，动画可能被中断或跳变。
- HTML 中给侧边栏加初始 class：
class="sidebar sidebar--drawer-closed" - JS 在
resize或orientationchange后，判断当前是否为移动断点（比如matchMedia('(max-width: 768px)')），再切换sidebar--drawer-open类 - CSS 里写：
.sidebar--drawer-open { transform: translateX(0); }，不依赖媒体查询嵌套 - 这样 JS 控制“是否该用抽屉”，CSS 只负责“抽屉怎么动”，职责清晰
overflow: hidden 必须加在 body 上，不是抽屉父容器
抽屉滑出时，页面主体内容如果允许横向滚动，用户一拉就看到白边，体验断裂。很多人把 overflow-x: hidden 加在抽屉的 wrapper 上，没用——真正要锁的是整个视口滚动。
错误现象：body 没锁，抽屉打开后右滑出现空白，关闭抽屉后 scrollX 还留在非零位置，页面错位。
- 抽屉打开时执行：
document.body.style.overflowX = 'hidden' - 抽屉关闭后恢复：
document.body.style.overflowX = ''（不要设'auto'，避免 Safari 下滚动条闪一下） - 如果用了
position: fixed的遮罩层（overlay），它也要加touch-action: none，否则 iOS 上划抽屉会同时触发页面滚动 - 注意：某些 UI 库（如 Bootstrap）会自己操作
body的padding-right来补偿滚动条，你得手动覆盖或同步处理
移动端触摸拖拽抽屉需要 touch-action: pan-x
想让用户手指滑动直接拖出抽屉，而不是触发页面滚动，必须明确告诉浏览器“这个区域只允许水平拖”。否则在 Chrome / Safari 上，手指一碰就可能误触发背景滚动，抽屉根本拉不出来。
使用场景：购物车抽屉、筛选面板、导航菜单——用户预期能“甩”出来，不是点一下才弹。
- 给抽屉根元素加：
touch-action: pan-x; - 同时监听
touchstart/touchmove，记录起始 X 和移动差值，动态设置transform: translateX(...) - 松手后根据位移比例决定是回弹还是吸附展开（比如移动超 40% 宽度就完全展开）
- 别用
touch-action: none—— 它会禁掉所有原生手势，包括双指缩放，体验更差
抽屉的边界处理、键盘焦点管理、屏幕阅读器支持，这些都得额外补。但光让视觉动起来，核心就是这四点：位移用 transform、状态交由 JS 控、body 锁溢出、触摸手势明确定义。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
