在 react 应用中实现移动端侧滑导航时，常因 `position: fixed` 的导航层未完全阻断触摸事件传递，导致用户滑动菜单仍可滚动背后内容。本文提供零跳转、无闪屏的纯 css + javascript 解决方案，精准锁定滚动并保持当前视口位置。
当移动端导航菜单（如 80vw 宽的 fixed 侧栏）展开时，iOS 和部分 Android 浏览器会将触摸滑动事件“穿透”到下方
或根容器，即使导航层已覆盖全高——这是浏览器对 fixed 元素与滚动容器协同行为的默认处理，并非 bug，但需主动干预。核心思路是：不依赖 overflow: hidden 直接作用于 （这会重置 scrollTop 导致页面跳顶），而是通过 touchmove 事件拦截 + 精确锁定滚动位置来实现静默禁用。
✅ 推荐实现方式（React 函数组件）
import { useEffect, useRef } from 'react';
function MobileNav({ isOpen, onClose }: { isOpen: boolean; onClose: () => void }) {
const scrollPosition = useRef(0);
useEffect(() => {
if (isOpen) {
// 记录当前滚动位置（仅一次）
scrollPosition.current = window.pageYOffset;
// 锁定 body 滚动：禁止 touchmove 并固定定位
document.body.style.cssText = `
position: fixed;
top: -${scrollPosition.current}px;
left: 0;
width: 100%;
overflow-y: hidden;
`;
} else {
// 恢复滚动：还原位置并清除样式
document.body.style.cssText = '';
window.scrollTo(0, scrollPosition.current);
}
// 清理函数确保关闭时恢复
return () => {
if (!isOpen) {
document.body.style.cssText = '';
}
};
}, [isOpen]);
return (
{/* 导航内容 */}
);
}⚠️ 关键注意事项
- 避免 overflow: hidden 单独作用于 body：它会强制重置 scrollTop=0，造成视觉跳变；
- position: fixed + top: -Ypx 是关键技巧：将 body 视觉上“钉住”，同时保留原始滚动偏移量，关闭时再 scrollTo() 还原；
-
务必添加 touch-action: none 到导航层（增强兼容性）：
.mobileNav { touch-action: none; /* 阻止 iOS/Android 将滑动事件传递给底层 */ } - 无障碍友好：启用菜单时建议设置 aria-hidden="true" 给主内容区，aria-modal="true" 给导航层，并管理焦点。
✅ 补充优化（CSS 层面）
/* 防止 backdrop 内容被聚焦或交互 */
.mobileNav--open ~ main,
.mobileNav--open ~ .app-content {
pointer-events: none;
}
/* 可选：添加轻微 backdrop 模糊或遮罩提升体验 */
.mobileNav--open::before {
content: '';
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.5);
z-index: 998;
}该方案已在 iOS Safari、Chrome for Android 及主流 WebView 中稳定运行，无回弹、无跳顶、无布局抖动。本质是绕过浏览器对 overflow: hidden 的副作用，用更可控的定位+滚动锚点实现真正“静默锁定”。
