捲軸管理

捲軸重置

在頁面之間導航時，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>