全屏遮罩导航点不开的主因是 pointer-events: none 拦截或 z-index 不足；iOS Safari 中 100vh 会塌陷，需用 min-height + height 组合或 JS 动态设置 --vh；滚动卡顿应分离蒙版与内容容器并设 overscroll-behavior；动画须分步监听 transitionend 而非简单 toggle。
全屏遮罩导航为什么点不开？检查 pointer-events 和层级顺序
最常见的情况是菜单 DOM 存在，但完全无法点击或触发 —— 很可能被父容器或 body 上的 pointer-events: none 拦住了，或者 z-index 不够高，被其他固定定位元素（比如 header、广告位）盖住。
- 用浏览器开发者工具选中遮罩层，看 computed 样式里
pointer-events是否为none；如果有，直接在该元素上覆盖写成pointer-events: auto -
z-index必须显式设置，且值要大于页面中所有可能重叠的固定/绝对定位元素；建议从z-index: 9999起手，再根据实际调整 - 确保遮罩容器（比如
.overlay-nav）本身没有display: none或visibility: hidden，这两者都会让内部交互失效
CSS 实现全屏遮罩时，height: 100vh 在 iOS Safari 上会塌陷
iOS Safari 的 vh 单位会把地址栏高度算进视口，滚动后地址栏收起，100vh 就变大，导致遮罩撑出滚动条甚至底部留白。这不是 bug，是它的行为逻辑。
- 改用
min-height: 100%;+ 父级height: 100vh;组合更稳，但前提是html和body都设了height: 100% - 更彻底的解法：用 JS 动态读取
window.innerHeight并写入 CSS 变量，比如document.documentElement.style.setProperty('--vh', `${window.innerHeight * 0.01}px`)，然后 CSS 中用height: calc(var(--vh, 1vh) * 100) - 别依赖
position: fixed; top: 0; left: 0; width: 100%; height: 100%;—— 在某些安卓 WebView 里，height: 100%对 fixed 元素不生效
导航菜单内容区域滚动卡顿？避免在 .overlay-nav 上直接设 overflow-y: auto
遮罩层本身如果同时承担背景蒙版和内容容器两个角色，又加了 overflow-y: auto，在部分 Android 机型上会出现滚动粘滞、回弹异常，甚至 touchmove 被吞掉。
- 把蒙版和内容分离：用两个同级元素，
.overlay-bg（纯黑色半透 +fixed）和.overlay-content（独立 scroll 容器，position: fixed+overflow-y: auto） -
.overlay-content必须设overscroll-behavior: contain，防止滚动到底部时触发整个页面回弹 - 给内容区加
-webkit-overflow-scrolling: touch（仅 iOS），否则惯性滚动消失；现代项目可换用scroll-behavior: smooth配合will-change: scroll-position提升响应
用 JS 控制显示/隐藏时，classList.toggle() 不如分两步控制动画节奏
直接 el.classList.toggle('is-open') 看似简洁，但遮罩淡入+菜单滑入的动画很难对齐，尤其关闭时经常出现“先消失后收起”或“菜单缩到一半遮罩就没了”。
立即学习“前端免费学习笔记（深入）”；
- 打开流程：先加类触发遮罩淡入（
opacity+transition），等transitionend后再加菜单展开类（比如transform: translateX(0)） - 关闭流程反向：先移除菜单展开类，等它 transition 结束，再移除遮罩类；可以用
getComputedStyle(el).transitionDuration动态读取时长 - 别用
setTimeout硬等时间 —— 用户切到后台再切回来，JS 计时会错乱；必须监听transitionend事件
CSS 全屏遮罩不是套个 fixed + 100vh 就完事，iOS 的 vh、Android 的滚动劫持、Safari 的 pointer-events 行为差异，都得一个个对着设备去验。动效节奏尤其容易被忽略——人眼对“遮罩和菜单不同步”极其敏感，宁可多写几行事件监听，也别图省事堆 class。
