Checkbox 控制抽屉显隐更轻量，因无需事件监听、不触发重排、无运行时依赖，纯 CSS 通过 :checked 伪类联动实现；需 input 与抽屉同 DOM 上下文，用 ~ 或 + 选择器；推荐 transform 替代 margin 实现滑入；移动端须用 label 显式关联并保障点击区域；抽屉滚动需设 overflow-y: auto、明确高度及 -webkit-overflow-scrolling: touch。
Checkbox 控制抽屉显隐为什么比 JS 更轻量
因为不需要监听事件、不触发重排、无运行时依赖，纯 CSS 就能完成状态切换和过渡动画。浏览器对 :checked 伪类的响应是原生且高效的，尤其适合移动端低性能设备。
关键前提是：抽屉必须和 <input type="checkbox"> 在同一 DOM 上下文（同级或父/子），才能用 ~ 或 + 选择器联动。
- 用
~可选中后续所有兄弟元素，适合抽屉放在input后面任意位置 - 用
+只能紧邻下一个兄弟元素，写法更严格但更可控 - 不要把
input包在<label>里再用for关联——那样会失去:checked对后续元素的样式穿透能力
抽屉从右侧滑入时 margin-left 不生效的常见原因
很多人写 margin-left: 100%; 想让抽屉初始藏在视口外，结果发现没动。根本原因是：margin 不触发重绘，且受父容器 overflow 和自身 position 影响极大。
- 必须设
position: fixed或absolute，否则margin-left: 100%是相对于父容器宽度计算，不是视口 - 父容器若设了
overflow: hidden，可能直接裁掉“移出去”的部分，看起来像没动 - 推荐改用
transform: translateX(100%)—— 性能更好、支持硬件加速、不破坏文档流 - 过渡要写在抽屉本身上，而不是
:checked触发的规则里，否则首次打开无动画
移动端点击 checkbox 无法触发 :checked 的兼容问题
iOS Safari 和部分安卓 WebView 在 <input type="checkbox"> 没有 label 包裹时，点击区域极小（仅像素级），用户实际点不到，导致抽屉打不开。
立即学习“前端免费学习笔记（深入）”；
- 必须用
<label for="drawer-toggle">显式关联，不能只靠视觉叠放 -
label内容可以为空，但需设display: block和足够点击区域（至少 44×44px） - 避免用
pointer-events: none覆盖在 checkbox 上，哪怕是为了做图标——它会拦截原生点击 - 测试时真机点击，别只靠鼠标模拟，iOS 对 touch 事件的判定更严格
抽屉内容滚动卡顿或无法滚动的 CSS 设置
抽屉里内容多时，常出现滚动不跟手、手指松开就停、甚至完全不能拖动。这不是 JS 问题，而是 CSS 层叠和渲染层配置不对。
- 抽屉容器必须设
overflow-y: auto，且高度不能是100%（需明确值，如100vh） - 内部内容若用了
flex: 1或height: 100%，容易撑满导致无滚动空间，改用min-height: 0配合flex容器修复 - 加
-webkit-overflow-scrolling: touch（仅 iOS）可启用原生滚动惯性，但注意它会让元素脱离普通渲染层，慎用于动画中 - 避免在抽屉上同时设
transform和overflow—— 某些旧版 Android 会禁用滚动
真正难调的不是开关逻辑，而是滚动和动画在不同系统下的渲染一致性。一个 transform 值在 Chrome 里丝滑，在 Safari 里卡顿，得靠真机反复试。
