全屏图片叠加层仅Safari无法滚动，Chrome/Firefox正常，求技术解决方案

看起来你遇到的是Safari特有的滚动行为问题——毕竟Safari在处理全屏模态/叠加层的滚动时，和Chrome、Firefox的默认逻辑确实有不少差异。结合你的场景，我给你几个针对性的解决方案：

1. 给底层内容添加滚动锁定 #

这是最常见的解决思路，因为Safari很容易出现“滚动穿透”：当你滚动叠加层时，底层内容也会跟着滚动，甚至会抢占滚动焦点导致叠加层无法正常滚动。

你可以在叠加层打开时，给body或者最外层的容器添加一个锁定类：

.body-scroll-lock {
  overflow: hidden;
  position: fixed;
  width: 100%;
  top: 0;
  left: 0;
}

在React里，你可以用useEffect来控制这个类的添加和移除：

useEffect(() => {
  if (isOverlayOpen) {
    document.body.classList.add('body-scroll-lock');
  } else {
    document.body.classList.remove('body-scroll-lock');
  }
  // 清理函数，防止组件卸载后残留类名
  return () => document.body.classList.remove('body-scroll-lock');
}, [isOverlayOpen]);

注意：iOS Safari可能需要额外处理scrollTop的位置，防止锁定后页面跳回顶部，你可以在添加类之前记录当前的滚动位置，移除时恢复。

2. 确保叠加层的滚动容器配置正确 #

Safari对滚动容器的CSS要求更严格，你需要确认：

• 滚动容器设置了明确的高度（比如height: 100vh或者height: 100%，且父容器也设置了height: 100%）
• 正确设置了overflow-y: auto（或scroll）
• 可以试试添加或移除-webkit-overflow-scrolling: touch属性——这个属性是用来优化iOS Safari的滚动体验，但有时候也会引发奇怪的滚动问题

示例CSS：

.overlay-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  overflow-y: auto;
  /* -webkit-overflow-scrolling: touch; 按需启用 */
}

3. 排查触摸事件的默认行为 #

如果你的代码里有自定义的触摸事件处理（比如onTouchStart、onTouchMove），要检查是否无意中调用了preventDefault()——Safari对触摸事件的默认行为限制更严格，全局阻止可能会导致滚动失效。

确保只有在特定交互（比如拖拽、滑动切换图片）时才阻止默认行为，不要影响正常的滚动逻辑。

4. 和其他成熟实现的差异点 #

大多数流行的模态层库都已经处理了这些跨浏览器问题，核心差异通常在于：

• 有没有完整实现底层内容的滚动锁定（包括iOS Safari的特殊处理）
• 有没有针对Safari添加特定的CSS前缀和属性
• 有没有监听触摸事件来阻止滚动穿透

你可以对比这些库的源码，重点看他们处理滚动和触摸事件的逻辑。

先从滚动锁定和滚动容器的CSS配置入手，这两个步骤大概率能解决你遇到的问题。如果还是不行，再排查触摸事件的处理逻辑。

内容的提问来源于stack exchange，提问作者Espen Finnesand