使用InertiaJS和Vue3首次加载页面后滚动至元素遇回滚问题

以下是几个可行的解决办法，根据你的场景选择：

1. 全局自定义preserveScroll判断逻辑 #

在Inertia的初始化配置中，通过preserveScroll回调函数，针对首次加载场景禁用滚动保留：

import { createInertiaApp } from '@inertiajs/vue3'

createInertiaApp({
  // 其他配置项...
  preserveScroll: (event) => {
    // 首次加载时不保留滚动位置
    if (event.navigation.type === 'initial') {
      return false
    }
    // 其他场景沿用默认行为
    return true
  }
})

这个方法从根源上阻止了首次加载时的回滚操作，之后你在onMounted里的滚动代码就能正常生效。

2. 延迟滚动操作至preserveScroll之后执行 #

利用Inertia的page:finish事件，结合setTimeout把滚动操作放到事件循环的下一轮，确保在preserveScroll的回滚动作完成后再执行：

import { onMounted } from 'vue'
import { useRouter } from '@inertiajs/vue3'

export default {
  setup() {
    const router = useRouter()

    onMounted(() => {
      router.on('page:finish', () => {
        setTimeout(() => {
          const target = document.getElementById('你的目标元素ID')
          target?.scrollIntoView({ behavior: 'smooth' })
        }, 0)
      })
    })
  }
}

setTimeout(fn, 0)会把任务放到当前宏任务完成后执行，刚好避开preserveScroll的处理时机。

3. 导航时显式禁用preserveScroll #

如果你的页面是通过Inertia路由跳转过来的（而非直接访问），可以在跳转时直接设置preserveScroll: false：

// 比如在组件中触发跳转
router.visit('/目标页面路径', {
  preserveScroll: false
})

这样该页面加载时不会保留之前的滚动位置，你的自定义滚动操作就不会被覆盖。

4. 多次nextTick确保DOM与Inertia处理完成 #

如果上述方法无效，可以尝试在onMounted中嵌套两次nextTick，确保Inertia的preserveScroll逻辑已经执行完毕：

import { onMounted, nextTick } from 'vue'

export default {
  setup() {
    onMounted(async () => {
      await nextTick()
      await nextTick()
      const target = document.getElementById('你的目标元素ID')
      target?.scrollIntoView()
    })
  }
}

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