スクロール管理

スクロールのリセット

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 prop を使用してスクロール位置を保持できます。

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>

このページの内容

パートナー