> ## Documentation Index
> Fetch the complete documentation index at: https://inertiajs-vi.tuantq.online/llms.txt
> Use this file to discover all available pages before exploring further.

# Quản lý cuộn

## Đặ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](#scroll-regions) 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`.

<CodeGroup>
  ```js Vue icon="vuejs" theme={null}
  import { router } from "@inertiajs/vue3";

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

  ```js React icon="react" theme={null}
  import { router } from "@inertiajs/react";

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

  ```js Svelte icon="s" theme={null}
  import { router } from "@inertiajs/svelte";

  router.visit(url, { preserveScroll: true });
  ```
</CodeGroup>

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".

<CodeGroup>
  ```js Vue icon="vuejs" theme={null}
  import { router } from "@inertiajs/vue3";

  router.visit(url, { preserveScroll: "errors" });
  ```

  ```js React icon="react" theme={null}
  import { router } from "@inertiajs/react";

  router.visit(url, { preserveScroll: "errors" });
  ```

  ```js Svelte icon="s" theme={null}
  import { router } from "@inertiajs/svelte";

  router.visit(url, { preserveScroll: "errors" });
  ```
</CodeGroup>

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.

<CodeGroup>
  ```js Vue icon="vuejs" theme={null}
  import { router } from "@inertiajs/vue3";

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

  ```js React icon="react" theme={null}
  import { router } from "@inertiajs/react";

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

  ```js Svelte icon="s" theme={null}
  import { router } from "@inertiajs/svelte";

  router.post("/users", data, {
    preserveScroll: (page) => page.props.someProp === "value",
  });
  ```
</CodeGroup>

Khi dùng [Inertia link](/v3/the-basics/links), bạn có thể giữ vị trí cuộn bằng prop `preserveScroll`.

<CodeGroup>
  ```vue Vue icon="vuejs" theme={null}
  import { Link } from '@inertiajs/vue3'

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

  ```jsx React icon="react" theme={null}
  import { Link } from "@inertiajs/react";

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

  ```svelte Svelte icon="s" theme={null}
  import { inertia, Link } from '@inertiajs/svelte'

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

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

## 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ử đó.

```html theme={null}
<div class="overflow-y-auto" scroll-region="">
  <!-- Your page content -->
</div>
```

## Text fragments

[Text fragments](https://developer.mozilla.org/en-US/docs/Web/URI/Reference/Fragment/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 Inertia page, hãy bật [server-side rendering](/v3/advanced/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 v3 chính thức](https://inertiajs.com/docs/v3/advanced/scroll-management). 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.