ScrollArea
ScrollArea — область прокрутки с собственным скроллбаром: нативный скрыт, вместо него поверх контента рисуется overlay-ползунок — места он не занимает и появляется, только когда содержимое не помещается. Своей высоты у области нет: она растягивается по родителю, поэтому скролл появится лишь там, где размер чем-то ограничен (зона контента панели, колонка доски, ячейка сплита). Скроллится одна ось за раз — её задаёт orientation. Компонент построен на Ark UI ScrollArea, остальные пропсы уходят на его Root. В части компонентов область уже встроена — Panel.Content и popover Breadcrumbs скроллят содержимое сами, оборачивать его не нужно.
Используется в: Breadcrumbs, Panel
Анатомия
Примеры
Горизонтальный скролл
orientation="horizontal" разворачивает контент в ряд (так устроена доска трекера с колонками) и переносит ползунок вниз. Дети должны иметь свою ширину и не сжиматься (flex-shrink: 0), иначе ряд ужмётся по вьюпорту и скроллить будет нечего.
Отступы контента
Внутренние отступы и гап задавайте через contentClassName — класс уходит на контейнер содержимого, и отступы прокручиваются вместе с ним. Тот же паддинг на className (корне области) оставил бы ползунок висеть в стороне от края и обрезал бы содержимое при скролле.
API
| Prop | Type | Default |
|---|---|---|
contentClassNameКласс для внутреннего контейнера контента (например, отступы) | string | - |
orientationНаправление скролла | "vertical" | "horizontal" | "vertical" |
Наследуется от ComponentProps<typeof ArkScrollArea.Root>