侧滑菜单卡顿的根源是css重排，应改用transform: translatex()、will-change优化；滚动穿透需用overscroll-behavior和touch-action联合控制；点击延迟要用pointerdown替代click；定位错位需用position: fixed和明确上下文容器；焦点管理必须js主动控制。
为什么侧滑菜单一动就卡顿
根本不是 JS 写得慢，而是动画触发了重排（reflow）。用 left、margin-left 或 width 控制位移时，浏览器必须重新计算整个布局树，低端安卓 WebView 尤其明显。真实瓶颈在 CSS 层——只要改的是 layout 属性，GPU 就插不上手。
实操建议：
- 一律用 transform: translateX() 实现滑入/滑出，只走合成器线程，不触发布局
- 给菜单容器加 will-change: transform，提前提示浏览器该元素要动，尤其在 iOS Safari 和旧版 Chrome 中效果显著
- 避免在动画中读取 offsetLeft、getBoundingClientRect() 等会强制同步布局的 API
- 不要用 display: none 切换显隐：它无法过渡，会导致突兀闪现，且销毁/重建 DOM 开销大
移动端滚动穿透怎么彻底堵住
菜单打开后，背后页面还能滚、能点、Tab 键能跳进去——这不是 bug，是默认行为没约束。单纯给 body 加 overflow: hidden 在 iOS 上会丢失滚动位置、触发重排、甚至让键盘焦点失效。
实操建议：
- 打开菜单时，给 html 元素加 style="overscroll-behavior: none"，阻断滚动链透传
- 同时给 body 加 touch-action: none，防止手指在空白区误触背景滚动
- 记录当前 window.scrollY，关闭菜单后执行 window.scrollTo(0, savedY)，而不是靠 CSS 锁死
- 别用 position: fixed; top: 0; width: 100% 覆盖 body —— 它会截断 focusin 事件，键盘用户进不去菜单
触摸响应延迟和误操作怎么解
用 click 绑定菜单按钮，在 iOS 和部分 Android 上有约 300ms 延迟，用户点下去没反馈，连点还容易跳页。这不是兼容性问题，是浏览器在等双击缩放信号。
实操建议：
- 优先用 pointerdown 事件替代 click，无延迟，且兼容触控/鼠标/笔，不影响键盘可访问性
- 若必须用 touchstart，监听时一定要传 { passive: false }，否则 preventDefault() 无效
- 菜单容器设 touch-action: pan-y（可滚动列表）或 pan-x（横向轮播），别设 none —— 它会禁掉所有交互，包括点击和焦点获取
- 测试方法：真机上两指快速滑动菜单区域，看是否还透传到底部页面；透传说明 touch-action 没生效或设错了
抽屉菜单定位被截断或错位
菜单从右侧滑出，关掉后页面向右偏移、出现水平滚动条、底部留白——问题不在 JS 切类名，而在 CSS 定位上下文缺失。position: absolute 的菜单脱离文档流后，right: -200px 的负偏移会“溢出”父容器，浏览器把它当成了可滚动内容区。
实操建议：
- 用 position: fixed 定位菜单，确保始终贴右、不随页面滚动偏移，且层级独立
- 必须用一个明确的包裹容器（如 <div id="container">）作为菜单的定位上下文，并设 <code>position: relative 或 overflow: hidden
- 菜单高度用 height: 100vh，不用 99.5% —— 后者在 Safari 移动端因地址栏显示/隐藏会跳变
- 检查内部内容是否溢出：white-space: normal + word-break: break-word，避免单行文本撑宽容器
最易被忽略的是：菜单展开后，第一个可聚焦元素没自动获得焦点，键盘用户得手动 Tab 十几次才能进去；而收起时，焦点又卡在不可见按钮上，导致后续操作失焦。这部分没法靠 CSS 解决，必须用 JS 主动管理 focus() 和 blur()。
