React单页应用在Safari浏览器下滚动穿透问题应该怎么修复？

先说结论：React 单页应用在 Safari 上的滚动穿透问题，最稳妥的修复方案是 Fixed 定位 + 滚动快照。弹窗打开前记录 scrollTop，把 body 设成 fixed 并用负 top 抵消跳顶，关闭时还原样式并重置滚动位置。这套方法兼容 iOS 12～17 以及 WKWebView，是经过生产环境验证的。

React单页应用在Safari浏览器下滚动穿透问题应该怎么修复？

你在 iOS Safari 里打开弹窗，手指在弹窗区域滑动，底层页面却跟着滚动——甚至还会触发橡皮筋回弹。上下文丢了，操作乱套了。这不是 bug，而是 Safari 把滚动视为 viewport 级别的行为。单单靠 CSS 的 overflow: hidden 根本拦不住。

先确认是否真被穿透

弹窗打开后，用 Safari 开发者工具远程调试，检查 document.scrollingElement.scrollTop 在滑动过程中是否持续变化。有变化，穿透确实发生了；没变化，问题可能出在其他地方——比如弹窗内部没设 overflow-y: auto。

这一步不能省，不然很容易把 flex 布局错位、事件监听遗漏这些杂七杂八的问题，都误判成滚动穿透。

禁用默认滚动拦截（慎用）

方法一：在遮罩层上阻止 touchmove

给遮罩 DOM 节点绑定 touchmove 并调用 preventDefault：

modalRef.current.addEventListener('touchmove', e => e.preventDefault(), { passive: false });

⚠️ 注意： 这个做法会同时禁用弹窗内所有可滚动区域（长列表、textarea 等）的滑动。而且 iOS 11+ 即使加了 { passive: false }，也可能静默忽略。

方法二：条件式拦截（推荐）

只有触摸点不在可滚动子元素内时才阻止：

const isScrollable = (el) =>
  el?.matches('.modal-scrollable, .popup-list, textarea') ||
  el?.closest('.modal-scrollable, .popup-list, textarea');

modalRef.current.addEventListener(
  'touchmove',
  e => { if (!isScrollable(e.target)) e.preventDefault(); },
  { passive: false }
);

终极方案：Fixed 定位 + 滚动快照（生产环境首选）

这套方案是 Ant Design Mobile、Vant 等主流 UI 库实际在用的，兼容 iOS 12～17、WKWebView 以及第三方内嵌 WebView。

第一步：弹窗打开前，记录当前滚动位置

const scrollTop = document.scrollingElement.scrollTop;

第二步：设置 body 为 fixed 定位，用负 top 抵消跳顶

document.body.style.position = 'fixed';
document.body.style.top = `-${scrollTop}px`;
document.body.style.width = '100%';

第三步：弹窗关闭时，立即还原滚动位置并清除样式

document.body.style.position = '';
document.body.style.top = '';
document.body.style.width = '';
document.scrollingElement.scrollTop = scrollTop;
document.scrollingElement.offsetHeight; // 强制重排，防止 Android WebView 延迟生效

关键细节：关闭弹窗后记得触发一次 offsetHeight 读取，强制浏览器重排。否则在一些 Android 内嵌 WebView 上，滚动位置更新会延迟，导致页面跳闪。