抽屉菜单优先用 transform: translatex() 而非 left 或 margin-left，因其触发 gpu 加速、避免重排，动画更流畅；需配合 transition、语义类名、媒体查询及正确 dom 结构以解决 ios 滚动锁定等实际问题。
抽屉菜单为什么优先用 transform: translateX() 而不是 left 或 margin-left
因为 transform 触发 GPU 加速，动画更流畅；而 left 会触发重排（layout），margin-left 在某些浏览器中也可能导致布局抖动。尤其在移动端，卡顿感知明显。
关键点：只对有 position: fixed 或 absolute 的元素做 translateX() 平移，否则位移可能影响文档流或触发意外滚动条。
-
transform: translateX(-100%)表示完全左移一个自身宽度，视觉上隐藏 -
transform: translateX(0)表示回到原始位置，即完全展开 - 务必配合
transition: transform 0.3s ease-in-out，不要只写all - 避免在动画中同时修改
width或visibility，否则可能中断过渡或造成闪屏
如何让抽屉菜单在小屏显示、大屏自动收起且不干扰主内容
核心是用媒体查询 + 状态类控制，而不是靠 JS 切换 display。推荐用 .sidebar--open 这类语义类名，而非 .show 这种模糊命名。
典型结构：侧边栏 <aside class="sidebar"></aside> + 遮罩层 <div class="overlay"> + 触发按钮。遮罩层用于点击关闭和防止背景穿透点击。
<ul>
<li>小屏（如 <code>max-width: 768px）下，.sidebar 默认 transform: translateX(-100%)，.overlay 默认 display: none
.sidebar--open 类后，.sidebar 变为 transform: translateX(0)，.overlay 变为 display: block
min-width: 769px）下，直接设 .sidebar { transform: translateX(0); width: 260px; }，并移除所有切换逻辑body 加 overflow-x: hidden，否则抽屉展开时可能意外出现水平滚动条点击遮罩层关闭抽屉时，为什么有时会失效或误触背景元素
常见原因是 .overlay 没有占满整个视口，或者 z-index 层级被其他元素覆盖。另一个隐蔽问题是：遮罩层没有设置 cursor: pointer，某些安卓 WebView 下点击区域响应迟钝。
-
.overlay必须设position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;，不能用100%（它相对于父容器） -
z-index要高于抽屉（如抽屉z-index: 1000，遮罩设z-index: 999），但低于系统级弹窗（如alert） - 遮罩层需加
background-color: rgba(0,0,0,0.5)，透明度太低（如0.1）会导致点击穿透 - JS 关闭逻辑里，建议监听
.overlay的click，而不是document，避免事件冒泡干扰
移动端 iOS Safari 上抽屉滑入后页面无法滚动，怎么解
这是 iOS Safari 的经典 bug：当 position: fixed 元素存在时，body 滚动会被冻结。抽屉本身是 fixed，但它展开后，body 仍需可滚动 —— 所以不能把抽屉设在 body 内部并依赖 body 滚动。
- 解决方案：抽屉和遮罩层都挂载到
直接子节点（用 JSdocument.body.appendChild()动态插入），并确保它们的z-index高于所有内容 - 同时，在抽屉打开时，给
加style="position: fixed; top: -${window.scrollY}px"，关闭时恢复，并window.scrollTo(0, scrollY) - 更轻量做法：抽屉用
position: absolute+top: env(safe-area-inset-top)，避开刘海区，同时不干扰 body 定位流 - 切记：不要对
body或html设置overflow: hidden，改用height: 100vh; overflow: hidden作用于具体容器
transform 值更重要。
