BottomSheet 在移动端必须用 position: fixed 而非 absolute，因 absolute 受滚动容器影响易偏移或消失；iOS 键盘场景下 vh 失真，应以 transform: translateY 配合 max-height 控制展开/隐藏，并通过 html 固定定位解决滚动穿透，动画仅用 transform 和 opacity 避免重排。
BottomSheet 在移动端必须用 position: fixed 而非 absolute
因为 absolute 依赖最近的定位祖先，而移动端页面常有滚动容器（如 div[overflow-y: auto]），抽屉会随容器滚动偏移甚至消失。只有 fixed 能真正锚定视口底部。
但要注意：iOS Safari 在键盘弹出或地址栏收起时，vh 单位会失真，导致抽屉高度错乱。所以不能直接用 height: 80vh —— 应改用 max-height + transform: translateY 控制展开状态，初始设为 transform: translateY(100%)。
- 给抽屉容器设
position: fixed; bottom: 0; left: 0; right: 0; - 用
transform: translateY(100%)隐藏，transform: translateY(0)展开（配合transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94)更自然） - 避免设置
top或height: 100vh，它们在 iOS 键盘场景下不可靠
点击遮罩层关闭时，要阻止事件穿透到下方内容
常见错误是只给遮罩层加 click 关闭逻辑，但用户手指松开位置若刚好落在按钮上，会同时触发遮罩关闭 + 按钮点击，造成误操作。
解决方案是：遮罩层使用 pointer-events: auto，抽屉内容区域显式设 pointer-events: auto，并在遮罩 click 回调中调用 event.stopPropagation()；更稳妥的是监听遮罩 touchend 并检查 event.target === maskEl，再执行关闭。
立即学习“前端免费学习笔记（深入）”；
- 遮罩层 HTML 必须是抽屉容器的直接子元素，结构类似：
<div class="bottom-sheet"> <div class="mask"></div> <div class="panel">...</div> </div>
- 遮罩层 CSS 必须设
z-index高于面板（如z-index: 1040），面板设z-index: 1041 - 禁止对遮罩层使用
opacity: 0后还保留pointer-events: auto—— 透明 ≠ 不可点，该设opacity: 0.5+pointer-events: auto才安全
滚动穿透问题：打开 BottomSheet 后背景仍可滚动
这不是 CSS 能单独解决的问题，必须配合 JS。单纯给 body 加 overflow: hidden 在 iOS 上无效（Safari 忽略 body 的 overflow 控制），且会导致页面回弹卡顿。
正确做法是：记录打开前的 scrollY，给 html 元素加 style="position: fixed; width: 100%; top: -${scrollY}px"，关闭时恢复并 window.scrollTo(0, scrollY)。
- 不要操作
body的overflow，它在 iOS 下不生效 - 用
html元素做锁定，兼容性更好 - 如果页面本身用了
overscroll-behavior: contain，需临时移除，否则抽屉内滚动无法阻断背景滚动
动画卡顿？优先用 transform 和 opacity，禁用 height 或 top
BottomSheet 动画若用 height 变化，会触发重排（reflow），尤其在低端 Android 机上明显掉帧。同理，top 改变也会导致 layout 计算。
所有动画属性必须是合成层友好的：仅限 transform、opacity、filter。抽屉展开只需控制 transform: translateY()，遮罩只需控制 opacity。
- 给抽屉容器加
will-change: transform（仅在动画触发前动态添加，结束后移除） - 遮罩层动画用
opacity，别用background-color渐变 - 避免在动画过程中读取
offsetHeight或getBoundingClientRect()，会强制同步 layout
window.innerHeight 和 document.documentElement.clientHeight 的实时变化。 
