Scroll Area
A scroll container with a real scrollbar instead of the browser's, and an edge fade that says there is more.
Loading documentation…
Powered by heyo
ScrollArea replaces the browser's scrollbar with real elements: a 6px overlay
thumb that appears while you hover or scroll and fades out afterwards, the same
on every operating system. A dense pane does not carry a permanent grey gutter,
and the layout does not shift when content starts overflowing.
Something has to bound the height or there is nothing to scroll: set
maxHeight, or put a height on viewportClassName.
Put padding on viewportClassName, not on the root. Padding on the root sits
outside the scrolling box, which leaves the thumb floating away from the edge
and clips the first row.
Content fades out where it runs past an edge, so a cut-off list reads as more
below rather than as the end of the list. The fade only exists on edges that
actually have more content behind them, and it follows whichever axes
orientation enables. Turn it off with fade={false}.
orientation="both" draws a scrollbar on each axis and masks both edges at
once. Wide tables and log output are the usual cases.
heyo-scrollbar?They are not interchangeable.
ScrollArea is for designed surfaces — panes, cards, log views, popups —
where the scrollbar is part of the composition and the fade carries meaning.heyo-scrollbar, a plain utility, restyles the native scrollbar: thin,
translucent, no track, no buttons. No extra DOM, no JavaScript, and it
survives anything a scroll container cannot wrap — a <table> wrapper, a
dialog body, the sidebar.Which axes get a scrollbar. It defaults to vertical.
Shorthand for a bounded viewport, for example "18rem". Without it — or a
height on viewportClassName — nothing scrolls.
Fades content at an overflowing edge. It defaults to true and applies to
whichever axes orientation enables.
Class for the inner scrolling element. Padding belongs here.
Class for the root — radius, ring, width.
The scrolling content.
Rendered for you. Place it yourself only when you need a scrollbar somewhere unusual — outside the padded viewport, say.
The axis this scrollbar controls.