ScrollArea
Area with custom scrollbars
Import
Source
Docs
Package
Usage
ScrollArea component is based on Radix UI scroll area component. It is adapted to work well with light and dark color schemes and supports the following props:
type
defines scrollbars behavior:hover
– scrollbars are visible on hoverscroll
– scrollbars are visible on scrollauto
– similar tooverflow: auto
– scrollbars are always visible when the content is overflowingalways
– same asauto
but scrollbars are always visible regardless of whether the content is overflowingnever
– scrollbars are always hidden
offsetScrollbars
– offset scrollbars with paddingscrollbarSize
– scrollbar size in px, controls scrollbar and thumb width/heightscrollHideDelay
– delay in ms to hide scrollbars, applicable only when type ishover
orscroll
Horizontal scrollbars
Subscribe to scroll position changes
Provider onScrollPositionChange
function to subscribe to scroll position changes,
it will be called each time user scrolls with x and y coordinates:
Scroll position:
{ x: 0, y: 0 }
Scroll to position
To programmatically scroll to any position,
get viewport element ref with viewportRef
prop and call scrollTo
method:
Usage with other components
ScrollArea integrates seamlessly with all Mantine components that can require scrollbars. For example, it can be used with Navbar.Section component:
Styles API
ScrollArea.Autosize
ScrollArea.Autosize
component allows to create scrollable containers when given maxHeight
is reached:
ScrollArea component props
Name | Type | Description |
---|---|---|
dir | "ltr" | "rtl" | Reading direction of the scroll area |
offsetScrollbars | boolean | Should scrollbars be offset with padding |
onScrollPositionChange | (position: { x: number; y: number; }) => void | Subscribe to scroll position changes |
scrollHideDelay | number | Scroll hide delay in ms, for scroll and hover types only |
scrollbarSize | number | Scrollbar size in px |
type | "auto" | "scroll" | "always" | "never" | "hover" | Scrollbars type |
viewportProps | Pick<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof HTMLAttributes<HTMLDivElement>> & { ...; } | Props added to the viewport element |
viewportRef | ForwardedRef<HTMLDivElement> | Get viewport ref |
ScrollArea component Styles API
Name | Static selector | Description |
---|---|---|
root | .mantine-ScrollArea-root | Root element |
corner | .mantine-ScrollArea-corner | Corner between horizontal and vertical scrollbars |
viewport | .mantine-ScrollArea-viewport | Children wrapper |
scrollbar | .mantine-ScrollArea-scrollbar | Scrollbar |
thumb | .mantine-ScrollArea-thumb | Scrollbar thumb |