import {Meta} from '@storybook/addon-docs/blocks'

<Meta title='@dxtmisha/vi/functional/Classes/ScrollbarWidthRef - Chiều rộng thanh cuộn'/>

# Lớp ScrollbarWidthRef

Một lớp vỏ phản hồi bao quanh tiện ích cơ bản để xác định các thông số của thanh cuộn. Lớp này cho phép theo dõi cả sự hiện diện của thanh cuộn (loại của nó) và chiều rộng thực tế của nó tính bằng pixel. Điều này rất quan trọng để ngăn chặn tình trạng thay đổi bố cục (layout shift) khi thanh cuộn bị ẩn hoặc hiện, chẳng hạn như khi mở các cửa sổ modal.

## Các đặc điểm chính

- **Tính phản hồi** — tự động cập nhật các giá trị `item` và `width` khi nhận được dữ liệu từ trình duyệt.
- **Tính toán tự động** — lớp tự động khởi tạo việc đo chiều rộng thanh cuộn ngay sau khi tạo phiên bản.
- **Trạng thái sẵn sàng** — sự tồn tại của thuộc tính tính toán `is` cho phép sử dụng dữ liệu an toàn chỉ sau khi khởi tạo.
- **Đa nền tảng** — xác định chính xác các thanh cuộn "mảnh" và tự động ẩn (macOS, thiết bị di động).

## Khởi tạo

Tạo một phiên bản mới của `ScrollbarWidthRef` và bắt đầu quá trình không đồng bộ để đo chiều rộng thanh cuộn.

**Tham số:**
- `Không có`

```typescript
import { ScrollbarWidthRef } from '@dxtmisha/functional'

const scrollbar = new ScrollbarWidthRef()
```

## Các thuộc tính

### Trạng thái

- `item: Ref<boolean | undefined>` — Cờ xác định kết quả kiểm tra `ScrollbarWidth.is()`. Trả về `true` nếu thanh cuộn được coi là "đặc biệt" (ví dụ: tự động ẩn trong macOS hoặc di động, nơi chiều rộng thường `<= 8px`).
- `width: Ref<number>` — Chiều rộng thực tế của thanh cuộn tính bằng pixel. Mặc định là `0`. Được cập nhật không đồng bộ sau khi đo.
- `is: Computed<boolean>` — Trả về `true` khi việc tính toán chiều rộng hoàn tất và các giá trị `item` và `width` đã được cập nhật.

## Ví dụ

### Bù đắp cuộn động trong CSS

Sử dụng chiều rộng phản hồi để tạo biến CSS bù đắp cho khoảng cách khi thanh cuộn bị chặn.

```vue
<template>
  <div :style="style" class="container">
    Nội dung với bù đắp động
  </div>
</template>

<script setup>
import { computed } from 'vue'
import { ScrollbarWidthRef } from '@dxtmisha/functional'

const scrollbar = new ScrollbarWidthRef()

// Chỉ tính toán biến sau khi chiều rộng đã được xác định
const style = computed(() => ({
  '--scrollbar-width': scrollbar.is.value ? `${scrollbar.width.value}px` : '0px'
}))
</script>

<style scoped>
.container {
  /* Ví dụ sử dụng cho lề phải */
  padding-right: var(--scrollbar-width);
}
</style>
```

### Theo dõi loại thanh cuộn

```typescript
import { watch } from 'vue'
import { ScrollbarWidthRef } from '@dxtmisha/functional'

const scrollbar = new ScrollbarWidthRef()

watch(() => scrollbar.is.value, (ready) => {
  if (ready) {
    if (scrollbar.item.value) {
      console.log('Thanh cuộn hệ thống/tự động ẩn đang được sử dụng')
    } else {
      console.log(`Thanh cuộn tiêu chuẩn với chiều rộng ${scrollbar.width.value}px`)
    }
  }
})
```
