Scrollbars

Scroll modifiers

The verticalScroll and horizontalScroll modifiers provide the simplest way to allow the user to scroll an element when the bounds of its contents are larger than its maximum size constraints. You can attach the VerticalScrollbar composable to a scrollable component with the verticalScroll modifier and the HorizontalScrollbar composable to a scrollable component with the horizontalScroll modifier:

VerticalScrollbar(modifier = Modifier.align(Alignment.CenterEnd)
 {...}

You can move scrollbars by dragging the bars and using the mouse wheel or the touchpad. To move horizontal scrollbars with the mouse, side-click the wheel or hold down Shift.

Gif

Lazy scrollable components

You can also use scrollbars with lazy scrollable components such as LazyColumn and LazyRow. Lazy components are much more efficient when you expect a lot of items in the list since they only compose the items as they're needed.

VerticalScrollbar(modifier = Modifier.align(Alignment.CenterEnd)
 {...}

Gif

What's next?

Explore the tutorials about other desktop components.