如何修复Next.js移动端跳转页面后页面冻结无法滚动问题

以下是该场景下高频问题的排查优先级和对应修复方案，按出现概率从高到低排序：

• 优先排查汉堡菜单状态残留导致的滚动锁死
  Bootstrap 移动端折叠菜单、Offcanvas 侧边菜单默认会在展开时给 <body> 标签添加 modal-open 类名、写入 overflow: hidden 内联样式，用来禁止菜单展开时背景滚动。如果路由跳转时没有主动触发菜单收起逻辑，这些样式和类名不会被自动清除，直接会导致页面滚动被锁、操作无响应。
  排查方式：跳转后打开移动端调试工具，检查 <body> 标签是否残留 overflow: hidden 样式、是否携带 modal-open/offcanvas-open 类名。
  修复参考代码：

  // 写入全局布局组件或_app.js
  import { useEffect } from 'react'
  import { useRouter } from 'next/router'
  import bootstrap from 'bootstrap/dist/js/bootstrap.bundle.min.js'
  
  export default function GlobalLayout({ children }) {
    const router = useRouter()
    useEffect(() => {
      const clearMenuState = () => {
        // 隐藏所有处于展开状态的折叠菜单、侧边栏
        document.querySelectorAll('.offcanvas.show, .navbar-collapse.show').forEach(el => {
          const instance = bootstrap.Offcanvas.getInstance(el) || bootstrap.Collapse.getInstance(el)
          instance?.hide()
        })
        // 清除body上残留的滚动锁属性
        document.body.classList.remove('modal-open', 'offcanvas-open')
        document.body.removeAttribute('style')
      }
      router.events.on('routeChangeComplete', clearMenuState)
      return () => router.events.off('routeChangeComplete', clearMenuState)
    }, [router.events])
  
    return <>{children}</>
  }
  

• 其次排查Bootstrap JS重复初始化导致的事件冲突
  如果在每个页面组件单独引入Bootstrap JS包，路由切换时会重复给scroll/touchmove事件绑定监听回调，多份回调冲突会阻塞主线程，直接导致滚动卡顿、无响应。
  排查方式：打开调试工具的Event Listeners面板，查看scroll、touchmove事件的监听数量，如果跳转页面后监听数成倍增长，即可定位为该问题。
  修复方式：将Bootstrap JS的引入统一放到全局_app.js中仅加载一次，禁止单页面重复引入；如果是按需引入组件，需在组件卸载时主动销毁已创建的Bootstrap实例。
• 再排查渲染层性能问题
  如果导航栏使用position: fixed定位，同时叠加了大范围阴影、backdrop-filter模糊效果，移动端滚动时会触发高频重绘，导致页面卡顿。
  排查方式：打开Chrome性能面板，录制滚动操作的运行轨迹，如果Paint、Composite Layers阶段耗时占比超过30%，即可定位为渲染性能问题。
  修复方式：给固定定位的导航栏添加transform: translateZ(0)触发GPU加速，移除不必要的大范围模糊、阴影效果。
• 最后排查水合不匹配问题
  如果菜单交互混用原生Bootstrap DOM操作和React状态控制，路由跳转后React水合会覆盖原生DOM绑定的事件，导致滚动相关事件响应异常。
  排查方式：打开控制台查看是否存在Hydration相关报错，对比服务端返回的导航DOM结构和客户端渲染结构是否一致。
  修复方式：菜单的展开、收起状态统一通过React状态管理，避免混用原生DOM操作修改菜单显隐。

90%以上的同类问题都是第一类菜单状态残留导致的，优先验证该场景可以大幅缩短排查时间。

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