Scroll Area
Provides consistent scrollbars across platforms.
Features
- Scrolling behavior is native to the platform
- Scrollbar is positioned above the content so no layout shifting occurs
- Keyboard controls are unaffected and follow platform conventions
Anatomy
- Root: The container that wraps all parts of the scroll area
- Viewport: A container that wraps the scrollable content
- Content: The scrollable content
- Corner: The corner element displayed when both scrollbars are visible
- ScrollbarX: The track of the X scrollbar
- ThumbX: The thumb of the X scrollbar
- ScrollbarY: The track of the Y scrollbar
- ThumbY: The thumb of the Y scrollbar
Examples
Always
When the type is set to always, the scrollbars will always be visible.
Auto
When the type is set to auto, the scrollbars will only be visible when the content overflows.
Hover
When the type is set to hover, the scrollbars will only be visible when the mouse is over the
scroll area.
Scroll
When the type is set to scroll, the scrollbars will only be visible when the user is scrolling.
API Reference
createScrollArea
The builder function used to create the scroll area component.
Props
| Prop | Default | Type / Description |
type | 'hover' | 'auto' | 'always' | 'scroll' | 'hover' Determins when the scrollbar should be visible. |
hideDelay | 600 | number When the |
dir | ltr | ltr | rtl The reading direction of the scroll area. |
ids | - | Record<'root' | 'viewport' | 'content' | 'scrollbarX' | 'scrollbarY' | 'thumbX' | 'thumbY', string> Override the internally generated ids for the elements. |
Elements
| Element | Description |
The container that wraps all parts of the scroll area. | |
A container that wraps the scrollable content and is used to calculate the scrollbar size. | |
The scrollable content. | |
The track of the horizontal scrollbar. | |
The thumb of the horizontal scrollbar. | |
The track of the vertical scrollbar. | |
The thumb of the vertical scrollbar. |
Options
| Option | Description |
type | Determins when the scrollbar should be visible. |
hideDelay | When the |
dir | The reading direction of the scroll area. |
IDs
| Option | Description |
root | The writable store that represents the id of the |
viewport | The writable store that represents the id of the |
content | The writable store that represents the id of the |
scrollbarX | The writable store that represents the id of the |
scrollbarY | The writable store that represents the id of the |
thumbX | The writable store that represents the id of the |
thumbY | The writable store that represents the id of the |
root
The container that wraps all parts of the scroll area.
Data Attributes
| Data Attribute | Value |
[data-melt-scroll-area] | Present on all scroll area root elements. |
viewport
The container that wraps the scrollable content and is used to calculate the scrollbar size.
Data Attributes
| Data Attribute | Value |
[data-melt-scroll-area-viewport] | Present on all scroll area viewport elements. |
content
The scrollable content. This is the element that will be scrolled.
Data Attributes
| Data Attribute | Value |
[data-melt-scroll-area-content] | Present on all scroll area content elements. |
scrollbarY
The track of the vertical scrollbar.
Data Attributes
| Data Attribute | Value |
[data-state] |
|
[data-melt-scroll-area-scrollbar] | Present on all scroll area scrollbar elements. |
Custom Events
| Event | Value |
m-pointerdown | (e: ) => void |
m-pointerup | (e: ) => void |
m-pointermove | (e: ) => void |
thumbY
The thumb of the vertical scrollbar.
Data Attributes
| Data Attribute | Value |
[data-state] |
|
[data-melt-scroll-area-thumb] | Present on all scroll area thumb elements. |
Custom Events
| Event | Value |
m-pointerdown | (e: ) => void |
m-pointerup | (e: ) => void |
scrollbarX
The track of the horizontal scrollbar.
Data Attributes
| Data Attribute | Value |
[data-state] |
|
[data-melt-scroll-area-scrollbar] | Present on all scroll area scrollbar elements. |
Custom Events
| Event | Value |
m-pointerdown | (e: ) => void |
m-pointerup | (e: ) => void |
m-pointermove | (e: ) => void |
thumbX
The thumb of the horizontal scrollbar.
Data Attributes
| Data Attribute | Value |
[data-state] |
|
[data-melt-scroll-area-thumb] | Present on all scroll area thumb elements. |
Custom Events
| Event | Value |
m-pointerdown | (e: ) => void |
m-pointerup | (e: ) => void |
On This Page