Scroll Area
A native scroll container with custom scrollbars. The native bar is hidden; the thumb tracks scrollTop with CSS, not an animation library. The thumb uses the accent and stays fully round.
Anatomy
<UiScrollAreaRoot>
<UiScrollAreaViewport>
<UiScrollAreaContent>
Content
</UiScrollAreaContent>
</UiScrollAreaViewport>
<UiScrollAreaScrollbar>
<UiScrollAreaThumb />
</UiScrollAreaScrollbar>
<UiScrollAreaCorner />
</UiScrollAreaRoot>
Parts
- Root — overflow flags:
data-has-overflow-y,data-overflow-y-start,data-overflow-y-end(and the x equivalents). - Viewport — the scrolling element. Native scrollbar is hidden.
- Content — the scrolled contents.
- Scrollbar —
orientationdefaults tovertical. Shown only when that axis overflows. Click the track to jump. - Thumb — drag to scroll.
- Corner — fills the intersection when both axes overflow.