HTML无原生drawer组件，需用CSS+JS实现：fixed定位+transform动画+焦点管理+语义化属性。

HTML 本身没有 drawer 组件，所谓“抽屉底部弹出”，本质是用 CSS + JavaScript 实现的 DOM 层级控制和动画效果。直接写 <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 中差异明显。

立即学习“前端免费学习笔记（深入）”；

Article To Html

文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。

下载

实操建议：

• 初始状态设 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 上下拖拽触发页面滚动

真正难的不是“怎么弹出来”，而是“怎么关得干净”：焦点、语义、触摸响应、键盘导航、动画中断恢复——这些细节堆起来，才是生产环境里反复被测出问题的地方。