> ## 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

<Warning>Đây là tài liệu Inertia.js v1, phiên bản không còn được duy trì tích cực. Vui lòng tham khảo [tài liệu v3](/v3/getting-started/index).</Warning>

## Đặ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 đặt lại vị trí cuộn mặc định khi thực hiện visit. Bạn có thể tắt hành vi này bằng cách đặt tùy chọn `preserveScroll` thành `false`.

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

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

  ```js Vue 3 icon="vuejs" theme={null}
  import { router } from '@inertiajs/vue3'

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

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

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

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

  router.visit(url, { preserveScroll: false })
  ```
</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 2 icon="vuejs" theme={null}
  import { router } from '@inertiajs/vue2'

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

  ```js Vue 3 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 2 icon="vuejs" theme={null}
  import { router } from '@inertiajs/vue2'

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

  ```js Vue 3 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 sử dụng [liên kết Inertia](/v1/the-basics/links), bạn có thể giữ vị trí cuộn bằng prop `preserveScroll`.

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

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

  ```vue Vue 3 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'

  <a preserveScroll href="/">Home</a>
  ```

  ```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>
```

***

## 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 v1 chính thức](https://inertiajs.com/docs/v1/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.