用 CSS transform 实现右侧抽屉需以 transform: translateX(100%) 初始隐藏、translateX(0) 展开，配合 transition 和 position: fixed，避免 right 或 display: none；结构上用 checkbox + :checked ~ 控制显隐，遮罩与抽屉同级，body 滚动锁定需 JS 辅助。
用 CSS transform 实现右侧抽屉，不依赖 JS 框架
纯 HTML + CSS 就能做出右侧弹出的抽屉（drawer），关键不是靠 position: fixed 硬推，而是用 transform: translateX() 配合过渡动画。这样性能好、不触发重排，手机端也顺滑。
常见错误是直接改 right 或 margin-right，会导致浏览器强制重排，动画卡顿；还有人用 display: none 切换，结果动画根本不起作用。
- 抽屉容器必须设
position: fixed或absolute，且top: 0; height: 100vh; - 初始状态用
transform: translateX(100%);把它完全推出视口右侧 - 触发时改为
transform: translateX(0);，配合transition: transform 0.3s ease-out; - 记得加
will-change: transform;提前提示浏览器优化（尤其 iOS Safari）
HTML 结构要满足“遮罩层 + 抽屉内容”两层嵌套
结构松散或层级错位，会导致点击穿透、遮罩无效、或者抽屉盖不住主内容。最简但可靠的结构是：
<div id="drawer-overlay" class="overlay">
<div id="drawer-panel" class="drawer drawer-right">
<div class="drawer-content">...</div>
</div>
</div>
其中：#drawer-overlay 要覆盖全屏、半透明、z-index 比抽屉低；#drawer-panel 是抽屉本体，z-index 必须高于页面其他内容（建议 ≥ 1000）；.drawer-content 仅用于内边距和滚动控制，别在里面再套 position: fixed 元素——否则 iOS 上可能失焦或无法滚动。
立即学习“前端免费学习笔记（深入）”；
-
.overlay必须有background-color: rgba(0,0,0,0.4)和cursor: pointer - 抽屉宽度建议用
width: 320px或max-width: 80vw，避免在小屏上撑爆 - 如果内容超长，
.drawer-content要加overflow-y: auto; max-height: 100vh;
用 checkbox hack 控制显隐，零 JS 也能交互
不想写 JS？用原生 <input type="checkbox"> + :checked 伪类就能驱动显隐，兼容到 IE9+，且无运行时依赖。
核心是把 checkbox 放在 overlay 和 drawer 上方，用 label[for] 关联它，再用相邻兄弟选择器 ~ 控制后续元素：
<input type="checkbox" id="drawer-toggle" class="drawer-toggle">
<label for="drawer-toggle" class="drawer-trigger">☰</label>
<div class="overlay"></div>
<div class="drawer drawer-right"></div>
.drawer-toggle:checked ~ .overlay,
.drawer-toggle:checked ~ .drawer {
transform: translateX(0);
}
注意：.drawer-toggle 必须是第一个元素，且不能被 display: none 隐藏（可用 opacity: 0; position: absolute; 隐藏但保留可点击性）。
- 触发按钮
.drawer-trigger建议用position: relative; z-index: 1001;确保始终可点 - 移动端需加
touch-action: manipulation;防止点击延迟 - 如果页面有滚动条，抽屉打开时要给
body加overflow: hidden;（这个得用 JS，纯 CSS 做不到）
iOS Safari 滚动卡顿和 backdrop-filter 兼容问题
iOS 上抽屉里内容滚动不跟手，大概率是因为父容器没设 -webkit-overflow-scrolling: touch;；而用了 backdrop-filter: blur(4px) 做毛玻璃效果时，旧版 Safari 会直接失效甚至白屏。
- 对
.drawer-content加-webkit-overflow-scrolling: touch;（仅 iOS 有效，不影响其他平台） -
backdrop-filter务必配background-color: rgba(255,255,255,0.8)作降级，否则 iOS 12-13 显示为全黑 - 不要在抽屉上直接用
transform: scale()或rotate()，会破坏 iOS 的合成层，导致滚动掉帧 - 真机测试时，务必关掉「减少动画」系统设置，否则
transform过渡会被强制跳过
抽屉看似简单，但滚动行为、焦点管理、键盘弹起适配、以及 Safari 对 transform 合成层的处理逻辑，才是实际项目中最容易漏掉的点。
