滚动管理

滚动重置

在页面之间导航时，Inertia 会模仿默认的浏览器行为，自动将文档主体（以及您定义的任何 滚动区域）的滚动位置重置回顶部。

此外，Inertia 会跟踪每个页面的滚动位置，并在您在历史记录中向前和向后导航时自动恢复该滚动位置。

滚动保留

有时，在进行访问时，最好防止默认的滚动重置。您可以通过将 preserveScroll 选项设置为 false 来禁用此行为。

import { router } from '@inertiajs/vue3'

router.visit(url, { preserveScroll: false })

如果您只想在响应包含验证错误时保留滚动位置，请将 preserveScroll 选项设置为 "errors"。

import { router } from '@inertiajs/vue3'

router.visit(url, { preserveScroll: 'errors' })

您还可以通过提供回调来根据响应延迟评估 preserveScroll 选项。

import { router } from '@inertiajs/vue3'

router.post('/users', data, {
  preserveScroll: (page) => page.props.someProp === 'value',
})

使用 Inertia 链接 时，您可以使用 preserveScroll 道具保留滚动位置。

import { Link } from '@inertiajs/vue3'

<Link href="/" preserve-scroll>Home</Link>

滚动区域

如果您的应用程序不使用文档主体滚动，而是使用可滚动元素（使用 overflow CSS 属性），滚动重置将不起作用。

在这种情况下，您必须通过将 scroll-region 属性添加到元素来告诉 Inertia 管理哪些可滚动元素。

<div class="overflow-y-auto" scroll-region>
  <!-- Your page content -->
</div>