ScrollArea

ScrollArea — область прокрутки с собственным скроллбаром: нативный скрыт, вместо него поверх контента рисуется overlay-ползунок — места он не занимает и появляется, только когда содержимое не помещается. Своей высоты у области нет: она растягивается по родителю, поэтому скролл появится лишь там, где размер чем-то ограничен (зона контента панели, колонка доски, ячейка сплита). Скроллится одна ось за раз — её задаёт orientation. Компонент построен на Ark UI ScrollArea, остальные пропсы уходят на его Root. В части компонентов область уже встроена — Panel.Content и popover Breadcrumbs скроллят содержимое сами, оборачивать его не нужно.

Анатомия

ScrollArea
Viewport
Content
Children
Scrollbar
Thumb

Примеры

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

orientation="horizontal" разворачивает контент в ряд (так устроена доска трекера с колонками) и переносит ползунок вниз. Дети должны иметь свою ширину и не сжиматься (flex-shrink: 0), иначе ряд ужмётся по вьюпорту и скроллить будет нечего.

Отступы контента

Внутренние отступы и гап задавайте через contentClassName — класс уходит на контейнер содержимого, и отступы прокручиваются вместе с ним. Тот же паддинг на className (корне области) оставил бы ползунок висеть в стороне от края и обрезал бы содержимое при скролле.

API

PropTypeDefault
contentClassName

Класс для внутреннего контейнера контента (например, отступы)

string-
orientation

Направление скролла

"vertical" | "horizontal""vertical"

Наследуется от ComponentProps<typeof ArkScrollArea.Root>