使用CoreUI与InertiaJs时垂直滚动失效问题求助

问题背景 #

技术栈：Laravel + Vue 3 + Inertia.js + CoreUI 后台管理模板

• 异常现象：通过Inertia的<Link>组件从表单页跳转回异步加载的列表页后，页面垂直滚动完全失效，必须刷新页面才能恢复；使用普通<a>标签跳转则无此问题
• 已尝试操作：调整Inertia的prevent-scroll、scroll-region配置项，未解决问题
• 推测原因：CoreUI带头部/侧边栏的固定布局与Inertia <Link>的跳转后DOM更新逻辑冲突，导致滚动容器的监听或样式未正确初始化

可行解决思路 #

1. 手动触发滚动容器的布局重绘 #

CoreUI的滚动区域通常绑定在.c-body容器上，Inertia跳转后DOM更新但CoreUI的滚动监听未重新触发，可在列表页挂载时强制初始化：

<script setup>
import { onMounted } from 'vue'

onMounted(() => {
  const scrollContainer = document.querySelector('.c-body')
  if (scrollContainer) {
    // 重置滚动容器样式并触发重绘
    scrollContainer.style.overflowY = 'auto'
    scrollContainer.dispatchEvent(new Event('resize'))
  }
})
</script>

2. 覆盖Inertia全局滚动行为 #

在app.js中自定义Inertia跳转后的滚动逻辑，避免默认行为干扰CoreUI布局：

// app.js
createInertiaApp({
  // ...其他配置项
  scrollBehavior(to, from, savedPosition) {
    const scrollContainer = document.querySelector('.c-body')
    if (scrollContainer) {
      scrollContainer.scrollTop = 0
      scrollContainer.dispatchEvent(new Event('resize'))
    }
    return savedPosition || { top: 0 }
  },
})

3. 强制锁定滚动容器的CSS样式 #

部分场景下Inertia跳转后会意外修改CoreUI滚动容器的overflow属性，可在列表页样式中强制声明：

<style scoped>
.c-body {
  overflow-y: auto !important;
  height: calc(100vh - var(--c-header-height) - var(--c-footer-height)) !important;
}
</style>

4. 利用Inertia跳转回调处理 #

放弃<Link>组件，改用Inertia.visit手动跳转，在成功回调中处理滚动容器：

<script setup>
import { Inertia } from '@inertiajs/vue3'

const backToList = () => {
  Inertia.visit(route('contacts.index'), {
    onSuccess: () => {
      setTimeout(() => {
        const scrollContainer = document.querySelector('.c-body')
        if (scrollContainer) {
          scrollContainer.style.overflowY = 'auto'
          window.dispatchEvent(new Event('resize'))
        }
      }, 200)
    }
  })
}
</script>

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