ScrollArea

Augments native scroll functionality for custom cross-browser styling

SSR mode

Examples

Default

Item 1 - Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Item 2 - Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Item 3 - Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Item 4 - Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Item 5 - Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Item 6 - Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Item 7 - Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Item 8 - Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Item 9 - Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Item 10 - Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Item 11 - Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Item 12 - Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Item 13 - Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Item 14 - Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Item 15 - Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Item 16 - Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Item 17 - Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Item 18 - Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Item 19 - Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Item 20 - Lorem ipsum dolor sit amet, consectetur adipiscing elit.

API

The element family below can be composed together. Click an element to jump to its properties.

Element Purpose
ScrollArea Wraps a viewport that applies cross-browser custom scrollbar styling. Consumers control the height / width on the outer element via ClassName; the inner viewport overflows.

ScrollArea

Wraps a viewport that applies cross-browser custom scrollbar styling. Consumers control the height / width on the outer element via ClassName; the inner viewport overflows.

Property Type Required Description
ClassName string? Extra CSS classes appended to the outer container. Typically used to constrain height / width so the viewport can overflow.
ChildContent RenderFragment? Scrollable content rendered inside the viewport.

Rejoining the server...

Rejoin failed... trying again in seconds.

Failed to rejoin.
Please retry or reload the page.

The session has been paused by the server.

Failed to resume the session.
Please retry or reload the page.