Горизонтальный и вертикальный скролл

Radix UI предоставляет готовые, доступные и гибкие компоненты для реализации скроллинга, которые позволяют управлять как горизонтальной, так и вертикальной прокруткой контента. Основные компоненты для скролла включают ScrollArea, ScrollBar, ScrollThumb, а также вспомогательные элементы для настройки поведения и стилей.

Компонент ScrollArea

ScrollArea является контейнером для скроллируемого содержимого. Он управляет прокруткой автоматически и предоставляет API для кастомизации полосы прокрутки и области видимости.

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


  
    

      {/* Длинный контент для демонстрации скролла */}

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

  • Root — корневой элемент, контролирующий поведение скролла. Атрибут type может быть auto, always или scroll.
  • Viewport — видимая область контента.
  • Scrollbar — полоса прокрутки, может иметь ориентацию vertical или horizontal.
  • Thumb — ползунок на полосе прокрутки, который можно стилизовать отдельно.

Горизонтальный скролл

Горизонтальный скролл задается через свойство orientation="horizontal" у Scrollbar. Контент внутри Viewport должен иметь ширину, превышающую ширину контейнера, чтобы скролл был активен.

Особенности горизонтального скролла:

  • Полосы прокрутки располагаются снизу контейнера.
  • Ползунок автоматически подстраивается под длину контента.
  • Можно комбинировать с кастомными стилями для Thumb и Scrollbar, включая цвет, скругления и эффекты при наведении.

Вертикальный скролл

Вертикальный скролл — более стандартный сценарий. Он задается по умолчанию через orientation="vertical" или просто не указывая ориентацию.

Особенности вертикального скролла:

  • Полосы прокрутки располагаются справа контейнера.
  • Высота Thumb автоматически рассчитывается исходя из соотношения видимой области и общей высоты контента.
  • Поддерживает плавную прокрутку с использованием CSS-свойства scroll-behavior: smooth.

Кастомизация стилей полос прокрутки

Radix UI оставляет полную свободу в стилизации. Например, можно сделать Thumb с плавным эффектом изменения цвета при наведении:

.scrollbar-thumb {
  background-color: rgba(100, 100, 255, 0.5);
  border-radius: 4px;
  transition: background-color 0.2s;
}

.scrollbar-thumb:hover {
  background-color: rgba(100, 100, 255, 0.8);
}

Синхронизация вертикального и горизонтального скролла

Radix UI поддерживает одновременное использование горизонтального и вертикального скролла. Для этого достаточно добавить оба Scrollbar внутри одного ScrollArea.Root:


  
    

      {/* Контент, превышающий размеры контейнера */}

Автоматическое скрытие и управление поведением скролла

ScrollArea.Root позволяет управлять видимостью полос прокрутки через атрибут type:

  • auto — полосы видны только при необходимости.
  • always — полосы всегда видны.
  • scroll — полосы появляются только во время прокрутки.

Также доступна настройка scrollHideDelay для плавного скрытия полос после завершения прокрутки.

Прокрутка к элементу программно

Radix UI совместим с нативными методами прокрутки. Для программного управления можно использовать ref на Viewport:

const viewportRef = useRef(null);

const scrollToBottom = () => {
  viewportRef.current.scrollTo({ top: viewportRef.current.scrollHeight, beh * avior: 'smooth' });
};


  
Длинный контент

Поддержка accessibility (доступности)

Все компоненты Radix UI спроектированы с учетом доступности:

  • Поддержка клавиатурной навигации.
  • ARIA-атрибуты для информирования пользователей экранных читалок.
  • Возможность управления фокусом и акцентирование активного элемента.

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

Оглавление