ScrollArea

Components

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

type

ScrollAreaProps

BoxProps & {...}

Property	Description
shadow `boolean`	Shadow display on container
orientation `"horizontal" \| "vertical"`	Scroll direction
container `NodeByRef`	Link to the dom element, which will be a container with overflow
inner `NodeByRef`	Link to the dom element that will be stretched along with the content
onResize `ResizeObserverCallback`	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 />;

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

type

ScrollBarProps

BoxProps & {...}

Property	Description
orientation `"horizontal" \| "vertical"`	The direction of the scroll that can be calculated automatically
container `NodeByRef`	Link to the dom element, which will be a container with overflow

Stylized div. It takes all properties of Box.

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