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

<Meta title='@dxtmisha/ru/functional/Classes/ScrollbarWidthRef - Ширина скролла'/>

# Класс ScrollbarWidthRef

Реактивная надстройка над базовой утилитой для определения параметров полосы прокрутки. Класс позволяет отслеживать как наличие скроллбара (его тип), так и его фактическую ширину в пикселях. Это критично для предотвращения «прыжков» верстки (layout shift) при скрытии или появлении скролла, например, при открытии модальных окон.

## Ключевые особенности

- **Реактивность** — автоматическое обновление значений `item` и `width` при получении данных от браузера.
- **Автоматический расчет** — класс самостоятельно инициирует замер ширины скролла сразу после создания экземпляра.
- **Состояние готовности** — наличие вычисляемого свойства `is` позволяет безопасно использовать данные только после их инициализации.
- **Кроссплатформенность** — корректно определяет «тонкие» и скрывающиеся скроллбары (macOS, мобильные устройства).

## Инициализация

Создает новый экземпляр `ScrollbarWidthRef` и запускает асинхронный процесс замера ширины скролла.

**Параметры:**
- `Нет`

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

const scrollbar = new ScrollbarWidthRef()
```

## Свойства

### Состояние

- `item: Ref<boolean | undefined>` — Флаг, определяющий результат проверки `ScrollbarWidth.is()`. Возвращает `true`, если скроллбар считается «специальным» (например, автоскрывающийся в macOS или мобильный, где ширина обычно `<= 8px`).
- `width: Ref<number>` — Фактическая ширина полосы прокрутки в пикселях. По умолчанию `0`. Обновляется асинхронно после замера.
- `is: Computed<boolean>` — Возвращает `true`, когда расчет ширины завершен и значения `item` и `width` актуальны.

## Примеры

### Динамическая компенсация скролла в CSS

Использование реактивной ширины для создания CSS-переменной, которая компенсирует отступ при блокировке скролла.

```vue
<template>
  <div :style="style" class="container">
    Контент с динамическим отступом
  </div>
</template>

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

const scrollbar = new ScrollbarWidthRef()

// Рассчитываем переменную только после того, как ширина определена
const style = computed(() => ({
  '--scrollbar-width': scrollbar.is.value ? `${scrollbar.width.value}px` : '0px'
}))
</script>

<style scoped>
.container {
  /* Пример использования для отступа справа */
  padding-right: var(--scrollbar-width);
}
</style>
```

### Отслеживание типа скроллбара

```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('Используется системный/скрывающийся скроллбар')
    } else {
      console.log(`Стандартный скроллбар шириной ${scrollbar.width.value}px`)
    }
  }
})
```
