Quản lý cuộn

Bạn đang xem tài liệu Inertia.js v2. Inertia.js v3 đã được phát hành và hiện là phiên bản mặc định. Hãy xem hướng dẫn nâng cấp để bắt đầu.

Đặt lại vị trí cuộn

Khi điều hướng giữa các trang, Inertia mô phỏng hành vi mặc định của trình duyệt bằng cách tự động đưa vị trí cuộn của document body (cũng như mọi vùng cuộn bạn đã định nghĩa) trở lại đầu trang. Ngoài ra, Inertia theo dõi vị trí cuộn của từng trang và tự động khôi phục vị trí đó khi bạn điều hướng tiến hoặc lùi trong lịch sử trình duyệt.

Giữ vị trí cuộn

Đôi khi bạn muốn ngăn hành vi reset vị trí cuộn mặc định khi thực hiện visit. Có thể tắt hành vi này bằng cách đặt tùy chọn preserveScroll thành true.

import { router } from '@inertiajs/vue3'

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

import { router } from '@inertiajs/react'

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

import { router } from '@inertiajs/svelte'

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

Nếu chỉ muốn giữ vị trí cuộn khi response có lỗi validation, hãy đặt tùy chọn preserveScroll thành “errors”.

import { router } from '@inertiajs/vue3'

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

import { router } from '@inertiajs/react'

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

import { router } from '@inertiajs/svelte'

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

Bạn cũng có thể đánh giá trì hoãn tùy chọn preserveScroll dựa trên response bằng cách cung cấp một callback.

import { router } from '@inertiajs/vue3'

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

import { router } from '@inertiajs/react'

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

import { router } from '@inertiajs/svelte'

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

Khi dùng Inertia link, bạn có thể giữ vị trí cuộn bằng prop preserveScroll.

import { Link } from '@inertiajs/vue3'

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

import { Link } from '@inertiajs/react'

<Link preserveScroll href="/">Home</Link>

import { inertia, Link } from '@inertiajs/svelte'

<a href="/" use:inertia={{ preserveScroll: true }}>Home</a>

<Link href="/" preserveScroll>Home</Link>

Vùng cuộn

Nếu ứng dụng không cuộn bằng document body mà dùng các phần tử có thể cuộn (thông qua thuộc tính CSS overflow), cơ chế đặt lại vị trí cuộn sẽ không hoạt động. Trong những trường hợp này, bạn phải cho Inertia biết phần tử cuộn nào cần được quản lý bằng cách thêm thuộc tính scroll-region vào phần tử đó.

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

Text fragments

Text fragments cho phép liên kết trực tiếp đến một đoạn văn bản cụ thể trên trang bằng cú pháp URL đặc biệt như #:~:text=term. Tuy nhiên, trình duyệt loại bỏ fragment directive trước khi JavaScript chạy, vì vậy text fragment chỉ hoạt động nếu đoạn văn bản đích đã có trong HTML response ban đầu. Để dùng text fragment với các trang Inertia, hãy bật server-side rendering.

Tài liệu chính thức

Bài dịch này được đối chiếu từ tài liệu Inertia.js v2 chính thức. Nếu có khác biệt do phiên bản hoặc cập nhật mới, hãy ưu tiên tài liệu chính thức làm nguồn tham chiếu.

Bắt đầu

Cài đặt

Khái niệm cốt lõi

Kiến thức cơ bản

Dữ liệu & Props

Bảo mật

Nâng cao

Đặt lại vị trí cuộn

Giữ vị trí cuộn

Vùng cuộn

Text fragments

Tài liệu chính thức

​Đặt lại vị trí cuộn

​Giữ vị trí cuộn

​Vùng cuộn

​Text fragments

​Tài liệu chính thức

Đặt lại vị trí cuộn

Giữ vị trí cuộn

Vùng cuộn

Text fragments

Tài liệu chính thức