html无原生drawer组件，需用css+js实现：fixed定位+transform动画+焦点管理+语义化属性。
HTML 本身没有 drawer 组件，所谓“抽屉底部弹出”，本质是用 CSS + JavaScript 实现的 DOM 层级控制和动画效果。直接写 <drawer></drawer> 或指望原生 HTML 标签实现，会卡在第一步。
用 position: fixed + bottom: 0 定位抽屉容器
这是最可控、兼容性最好（IE11+）的定位方式。不能用 absolute，否则滚动时会脱离视口；也不能依赖 Flex/Grid 的“自动贴底”，因为抽屉需脱离文档流、不占位、可覆盖内容。
关键点：
-
position: fixed必须配合left: 0、right: 0和bottom: 0，否则宽度可能收缩或错位 - 设置
z-index（如z-index: 1000），确保压在其他内容上 - 抽屉内部用
max-height+overflow-y: auto控制滚动，避免页面整体滚动 - 别忘了加
transform: translateY(100%)初始状态隐藏，后续用 JS 切换transform值实现滑入
transform 动画比 top/bottom 更流畅
直接改 bottom 或 top 会触发 layout，动画易卡顿；而 transform: translateY() 只影响合成层，60fps 更稳，尤其在低端安卓 WebView 中差异明显。
实操建议：
- 初始状态设
transform: translateY(100%)（完全在屏幕外） - 展开时设
transform: translateY(0)，收起时再切回100% - 配合
transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94)，比默认ease更有“抽拉感” - 避免同时过渡
height和transform——height无法硬件加速，且需 JS 测量高度，增加复杂度
点击遮罩层关闭时，注意事件穿透与 focus 管理
常见错误：点了遮罩层（overlay）后抽屉消失，但焦点留在抽屉内元素上，键盘用户按 Tab 会“掉进不可见区域”，或再次唤起抽屉时焦点错乱。
必须处理：
- 遮罩层
div.overlay要设tabindex="-1"并监听click，触发关闭后立即将焦点还给触发按钮（用button.focus()） - 抽屉容器加
role="dialog"和aria-modal="true"，屏幕阅读器才识别为模态上下文 - 打开时用
inert属性（或手动aria-hidden="true"）禁用背景内容交互，防止键盘操作穿透 - 移动端要加
touch-action: none到遮罩层，避免 iOS 上下拖拽触发页面滚动
真正难的不是“怎么弹出来”，而是“怎么关得干净”：焦点、语义、触摸响应、键盘导航、动画中断恢复——这些细节堆起来，才是生产环境里反复被测出问题的地方。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
