Skip to content

ScrollArea

Components5.9.2

ScrollArea

import ScrollArea from '@semcore/ui/scroll-area';
<ScrollArea />;
typeScrollAreaProps
BoxProps & {...}
PropertyDescription
shadow
boolean

Shadow display on container

orientation
"horizontal" | "vertical"

Scroll direction

container

Link to the dom element, which will be a container with overflow

inner

Link to the dom element that will be stretched along with the content

onResize

Callback executed when container change size

onScroll
(event: React.SyntheticEvent) => void

Called every time user scrolls area

tabIndex
number | null

Tab index that is being bypassed to the scroll container.

ScrollArea.Container

This is a wrap over the content to calculate its size. It takes all properties of Box.

import ScrollArea from '@semcore/ui/scroll-area';
<ScrollArea.Container />;

ScrollArea.Bar

import ScrollArea from '@semcore/ui/scroll-area';
<ScrollArea.Bar />;
typeScrollBarProps
BoxProps & {...}
PropertyDescription
orientation
"horizontal" | "vertical"

The direction of the scroll that can be calculated automatically

container

Link to the dom element, which will be a container with overflow

ScrollArea.Bar.Slider

Stylized div. It takes all properties of Box.

import ScrollArea from '@semcore/ui/scroll-area';
<ScrollArea.Bar.Slider />;