Skip to main content

Scroll Area

Provides consistent scrollbars across platforms.

Endless Flavors

Vanilla
Chocolate
Strawberry
Mint Chocolate Chip
Cookies and Cream
Rocky Road
Pistachio
Neapolitan
Butter Pecan
Salted Caramel
Coffee
Mango
Raspberry Ripple
Lemon Sorbet
Green Tea
Coconut
Black Cherry
Banana
Almond Fudge
Cinnamon
Blueberry Cheesecake
Tiramisu
Red Velvet
Matcha
Peanut Butter Cup
Cookie Dough
Rum Raisin
Birthday Cake
Lychee
Honey Lavender

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.

Endless Flavors

Vanilla
Chocolate
Strawberry
Mint Chocolate Chip
Cookies and Cream
Rocky Road
Pistachio
Neapolitan
Butter Pecan
Salted Caramel
Coffee
Mango
Raspberry Ripple
Lemon Sorbet
Green Tea
Coconut
Black Cherry
Banana
Almond Fudge
Cinnamon
Blueberry Cheesecake
Tiramisu
Red Velvet
Matcha
Peanut Butter Cup
Cookie Dough
Rum Raisin
Birthday Cake
Lychee
Honey Lavender

Auto

When the type is set to auto, the scrollbars will only be visible when the content overflows.

Endless Flavors

Vanilla
Chocolate
Strawberry
Mint Chocolate Chip
Cookies and Cream
Rocky Road
Pistachio
Neapolitan
Butter Pecan
Salted Caramel
Coffee
Mango
Raspberry Ripple
Lemon Sorbet
Green Tea
Coconut
Black Cherry
Banana
Almond Fudge
Cinnamon
Blueberry Cheesecake
Tiramisu
Red Velvet
Matcha
Peanut Butter Cup
Cookie Dough
Rum Raisin
Birthday Cake
Lychee
Honey Lavender

A Few Flavors

Vanilla
Chocolate
Strawberry
Mint Chocolate Chip
Cookies and Cream

Hover

When the type is set to hover, the scrollbars will only be visible when the mouse is over the scroll area.

Endless Flavors

Vanilla
Chocolate
Strawberry
Mint Chocolate Chip
Cookies and Cream
Rocky Road
Pistachio
Neapolitan
Butter Pecan
Salted Caramel
Coffee
Mango
Raspberry Ripple
Lemon Sorbet
Green Tea
Coconut
Black Cherry
Banana
Almond Fudge
Cinnamon
Blueberry Cheesecake
Tiramisu
Red Velvet
Matcha
Peanut Butter Cup
Cookie Dough
Rum Raisin
Birthday Cake
Lychee
Honey Lavender

Scroll

When the type is set to scroll, the scrollbars will only be visible when the user is scrolling.

Endless Flavors

Vanilla
Chocolate
Strawberry
Mint Chocolate Chip
Cookies and Cream
Rocky Road
Pistachio
Neapolitan
Butter Pecan
Salted Caramel
Coffee
Mango
Raspberry Ripple
Lemon Sorbet
Green Tea
Coconut
Black Cherry
Banana
Almond Fudge
Cinnamon
Blueberry Cheesecake
Tiramisu
Red Velvet
Matcha
Peanut Butter Cup
Cookie Dough
Rum Raisin
Birthday Cake
Lychee
Honey Lavender

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 type is 'scroll' or 'hover', this determines how long the scrollbar should be visible after the user either stops scrolling or stops hovering over the scroll area.

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 type is 'scroll' or 'hover', this determines how long the scrollbar should be visible after the user either stops scrolling or stops hovering over the scroll area.

dir

The reading direction of the scroll area.

IDs

Option Description
root

The writable store that represents the id of the root element.

viewport

The writable store that represents the id of the viewport element.

content

The writable store that represents the id of the content element.

scrollbarX

The writable store that represents the id of the scrollbarX element.

scrollbarY

The writable store that represents the id of the scrollbarY element.

thumbX

The writable store that represents the id of the thumbX element.

thumbY

The writable store that represents the id of the thumbY element.

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]

'visible' | 'hidden'

[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]

'visible' | 'hidden'

[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]

'visible' | 'hidden'

[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]

'visible' | 'hidden'

[data-melt-scroll-area-thumb]

Present on all scroll area thumb elements.

Custom Events

Event Value
m-pointerdown (e: ) => void
m-pointerup (e: ) => void