Next.js/React应用在macOS Safari浏览器中出现间歇性滚动失效问题

这种Safari特有的间歇性问题确实让人头疼，我之前也遇到过类似的情况，结合我的经验和对Safari渲染机制的了解，给你梳理几个可能的原因和对应的解决思路：

一、最可能的原因：直接操作body的overflow引发的渲染冲突 #

你在页面组件中通过useEffect修改document.body.style.overflow的操作，在Safari的客户端路由切换场景下容易出问题——因为Next.js的页面切换是无刷新的，多个页面的样式修改可能互相干扰，导致Safari无法正确重绘滚动区域。

解决办法：改用全局容器管理滚动 #

放弃直接操作body的滚动，在_app.js中设置一个全局包裹容器，把滚动逻辑交给它：

// pages/_app.js
export default function MyApp({ Component, pageProps }) {
  return (
    <div className="app-global-container">
      <Component {...pageProps} />
    </div>
  );
}

对应的CSS：

html, body {
  height: 100%;
  overflow: hidden; /* 禁用body的原生滚动 */
  margin: 0;
}

.app-global-container {
  min-height: 100vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  will-change: scroll-position; /* 提示Safari提前优化滚动 */
}

这样所有页面的滚动都由这个全局容器接管，避免了多页面修改body样式的冲突。

二、事件监听的被动性问题 #

Safari对touchmove、scroll这类滚动相关事件的被动监听有严格限制，如果你的代码或第三方库中存在非被动的事件监听（且调用了event.preventDefault()），很可能会阻塞滚动，甚至导致间歇性失效。

解决办法：检查并优化事件监听 #

1. 所有自定义的touchmove、scroll事件监听，都要设置passive: true（除非你确实需要阻止默认行为）：

document.addEventListener('touchmove', handleTouchMove, { passive: true });

2. 检查React组件中的onTouchMove事件，尽量避免在回调中调用e.preventDefault()——如果必须阻止，确保只在特定场景下执行，不要全局拦截。

三、硬件加速渲染异常 #

Safari的GPU渲染机制偶尔会出现bug，当滚动容器或其子元素使用了transform、opacity等触发硬件加速的属性时，可能导致滚动区域“冻结”。

解决办法：优化渲染属性 #

1. 移除滚动容器上不必要的transform: translateZ(0)这类强制硬件加速的代码；
2. 给滚动容器添加will-change: scroll-position（已经在全局容器的CSS中提到），帮助Safari提前做好滚动优化；
3. 检查页面中是否有固定定位的元素（比如导航栏），如果有，尝试给滚动容器设置更高的z-index，避免固定元素干扰滚动事件传递。

四、Safari专属调试技巧 #

因为问题是间歇性的，常规调试很难复现，推荐用Safari自带的开发者工具针对性排查：

• 元素面板：选中滚动容器或body，切换到「Computed」标签，查看实际生效的overflow属性是否被意外篡改；
• 时间线面板：开启「Timelines」录制，当滚动失效时停止录制，查看是否有JS执行阻塞、布局重绘异常的情况；
• 事件监听器面板：过滤scroll、touchmove事件，检查所有注册的监听器，排查是否有可疑的preventDefault()调用；
• 渲染调试：在开发者工具的设置中开启「Show Rendering」，勾选「Paint flashing」和「Layout borders」，滚动失效时观察滚动容器的渲染状态是否异常。

内容来源于stack exchange