Root, Viewport, Scrollbar

Root является фундаментальным контейнером для многих компонентов Radix UI. Он определяет область, в рамках которой будут работать вложенные элементы, обеспечивая корректное позиционирование, управление состояниями и событиями. В большинстве случаев Root используется как обёртка для интерактивных компонентов, таких как ScrollArea, Dialog или Popover.

import * as ScrollArea from '@radix-ui/react-scroll-area';

<ScrollArea.Root>
  <ScrollArea.Viewport>
    {/* Контент с прокруткой */}
  </ScrollArea.Viewport>
  <ScrollArea.Scrollbar orientation="vertical">
    <ScrollArea.Thumb />
  </ScrollArea.Scrollbar>
</ScrollArea.Root>

Ключевые моменты Root:

  • Управление состоянием прокрутки: Root отслеживает события прокрутки и передаёт их дочерним компонентам.
  • Обёртка для Viewport и Scrollbar: без Root Scrollbar и Viewport не смогут корректно функционировать.
  • Контекст для вложенных компонентов: обеспечивает единый контекст стилей и поведения, что важно для согласованной работы сложных интерфейсов.

Viewport

Viewport представляет собой видимую область контента, который можно прокручивать. Этот компонент управляет отображением содержимого внутри Root и определяет размеры области, доступной пользователю.

Особенности Viewport:

  • Ограничение видимой области: контент, выходящий за границы Viewport, скрывается до момента прокрутки.
  • Автоматическая интеграция с Scrollbar: Viewport передаёт информацию о прокрутке Scrollbar, обеспечивая синхронизацию позиции ползунка с реальным содержимым.
  • Поддержка стилизации: можно использовать CSS для настройки размеров, скруглений и эффектов обрезки (overflow).

Пример использования Viewport с фиксированными размерами:

<ScrollArea.Root>
  <ScrollArea.Viewport style={{ width: 300, height: 200 }}>
    <div style={{ height: 600 }}>
      Длинный контент, который требует прокрутки
    </div>
  </ScrollArea.Viewport>
</ScrollArea.Root>

При этом Viewport автоматически создаёт точку отсчёта для Scrollbar и Thumb, не требуя ручного управления позициями.

Scrollbar и Thumb

Scrollbar — это полоса прокрутки, визуальный элемент, который показывает текущую позицию внутри Viewport. Radix UI предоставляет Scrollbar как полностью управляемый компонент с ориентацией (vertical или horizontal), возможностью кастомизации и доступностью для клавиатурного управления.

Thumb — это ползунок внутри Scrollbar, который указывает на текущую позицию прокрутки. Он автоматически синхронизируется с Viewport, меняя размеры и положение в зависимости от содержимого.

Пример вертикальной прокрутки:

<ScrollArea.Scrollbar orientation="vertical" style={{ width: 10, background: '#f0f0f0' }}>
  <ScrollArea.Thumb style={{ background: '#888', borderRadius: 5 }} />
</ScrollArea.Scrollbar>

Ключевые возможности Scrollbar и Thumb:

  • Динамическая подстройка размера Thumb: размер ползунка изменяется в зависимости от соотношения видимой области к общей высоте контента.
  • Поддержка событий Drag и Click: Thumb можно перетаскивать, Scrollbar реагирует на клики по треку.
  • Полная кастомизация стилей: фон, скругления, тени, hover и active состояния настраиваются через CSS.

Синергия Root, Viewport и Scrollbar

Правильное использование этих трёх компонентов создаёт полностью управляемую систему прокрутки:

  1. Root — задаёт контекст и управляет состояниями.
  2. Viewport — ограничивает видимую область и сообщает Root о событиях прокрутки.
  3. Scrollbar с Thumb — визуализируют и управляют положением внутри Viewport.

Эта архитектура обеспечивает:

  • Предсказуемое поведение даже с динамическим контентом.
  • Высокую производительность за счёт минимизации перерисовок и синхронизации.
  • Гибкость в стилизации и адаптации под любые дизайны.

Использование всех трёх компонентов совместно позволяет создавать прокручиваемые контейнеры, полностью соответствующие современным требованиям UX и доступности.

Оглавление