抽屉应优先用 transform: translatex() 而非 position: fixed，因后者脱离文档流易遮挡内容且 ios safari 兼容差；内部底部操作栏需用 flex 布局 + margin-top: auto 实现吸底，不可用 position: fixed 或 absolute。
抽屉（Drawer）用 position: fixed 还是 transform？
直接用 position: fixed 拉出抽屉最简单，但会脱离文档流，导致页面滚动时抽屉不动、内容被遮挡；更稳妥的做法是用 transform: translateX() 配合 overflow: hidden 控制主体，这样滚动行为正常，也方便做过渡动画。移动端尤其要注意：iOS Safari 对 fixed 在 body 上的定位有兼容问题，容易“粘不住”底部。
- 抽屉容器设
position: fixed或position: absolute，但父容器需设position: relative且高度撑满视口 - 主体内容区域加
overflow: hidden，防止抽屉展开时还能横向滚动 - 用
transform: translateX(100%)初始隐藏，translateX(0)展开，比left: 100%性能更好
footer_html 抽屉底部操作栏怎么固定在底部不随内容滚动？
所谓“底部操作栏”，本质是一个固定在抽屉容器底部的区块，不是整个页面的 footer。不能用 position: fixed 绑定到 viewport，否则在长抽屉里会被内容盖住或错位；正确做法是在抽屉内部用 flex 布局 + margin-top: auto 或 align-items: flex-end。
- 抽屉容器设
display: flex; flex-direction: column; height: 100vh（或100%，取决于父级） - 内容区用
flex: 1; overflow-y: auto，确保可滚动 - 底部操作栏单独一个
div，放在最后，加margin-top: auto即可吸底 - 避免给操作栏设
position: absolute; bottom: 0—— 它会脱离 flex 流，在某些安卓 WebView 中失效
drawer 的打开/关闭状态怎么控制才不卡顿？
纯 CSS 切换（比如靠 class 切换 transform）最轻量，但需要 JS 触发 class 变更；如果用 JS 直接改 style.transform，要注意不要在循环中反复读写，否则强制同步布局。另外，iOS Safari 对 transform + transition 的组合偶尔掉帧，加 will-change: transform 能缓解。
- 用
classList.toggle('is-open')控制状态，CSS 里定义.drawer.is-open { transform: translateX(0); } - 过渡时间建议
transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94)，比ease更顺滑 - 打开后立即给
body加overflow: hidden，防止背景滚动；关闭时记得移除 - 别用
display: none切换抽屉 —— 它会销毁渲染树，再打开要重绘，动画会断
为什么 footer_html 操作按钮点击没反应？常见 DOM 和事件陷阱
抽屉常通过 innerHTML 或模板字符串插入 HTML，如果里面含 button onclick="handle()" 这类内联 JS，而 handle 是局部函数或未挂到 window，就会报 handle is not defined。另外，如果抽屉是动态插入的，事件监听器没绑定到新节点上，也会“点不动”。
- 杜绝内联
onclick，统一用addEventListener绑定到抽屉容器，用事件委托处理按钮 - 确保抽屉 DOM 插入完成后再绑定事件，比如在
insertAdjacentHTML后调用初始化函数 - 检查按钮是否被
pointer-events: none或更高层z-index遮挡 —— 抽屉的z-index至少要比主内容高 1000 - 移动端注意
touch-action: manipulation加在按钮上，减少点击延迟
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
