scrollbar

Functions summary

Modifier
@Composable
Modifier.scrollbar(
    state: ScrollIndicatorState?,
    orientation: Orientation,
    thumbColor: Color,
    trackColor: Color,
    thickness: Dp,
    thumbMinLength: Dp,
    thumbMaxLengthFraction: @FloatRange(from = 0.0, to = 1.0) Float,
    isFadeEnabled: Boolean,
    fadeDurationMillis: Int,
    fadeDelayMillis: Int,
    mainAxisTrackInset: Dp,
    crossAxisTrackInset: Dp
)

A scrollbar that represents the current scroll position of a scrolling component.
Cmn

Functions

Modifier.scrollbar

Cmn 
@Composable
fun Modifier.scrollbar(
    state: ScrollIndicatorState?,
    orientation: Orientation,
    thumbColor: Color = ScrollbarDefaults.thumbColor,
    trackColor: Color = Color.Transparent,
    thickness: Dp = ScrollbarDefaults.Thickness,
    thumbMinLength: Dp = ScrollbarDefaults.ThumbMinLength,
    thumbMaxLengthFraction: @FloatRange(from = 0.0, to = 1.0) Float = ScrollbarDefaults.ThumbMaxLengthFraction,
    isFadeEnabled: Boolean = true,
    fadeDurationMillis: Int = ScrollbarDefaults.ThumbFadeDurationMillis,
    fadeDelayMillis: Int = ScrollbarDefaults.ThumbFadeDelayMillis,
    mainAxisTrackInset: Dp = ScrollbarDefaults.MainAxisTrackInset,
    crossAxisTrackInset: Dp = ScrollbarDefaults.CrossAxisTrackInset
): Modifier

A scrollbar that represents the current scroll position of a scrolling component.

This scrollbar cannot be interacted with to scroll the component, it is a visual only representation of the scroll position. It is drawn at the end edge (respecting layout direction) for a vertically scrollable component, and at the bottom edge for a horizontally scrollable component.

The scrollbar is only visible if the content size is strictly greater than the viewport size. By default, the scrollbar is shown when scrolling is active and fades out after a delay when scrolling stops. This fading behavior can be disabled by setting isFadeEnabled to false, in which case the scrollbar remains always visible.

To use a scrollbar with a androidx.compose.foundation.lazy.LazyColumn, see:

import androidx.compose.foundation.gestures.Orientation
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.wrapContentSize
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.foundation.lazy.rememberLazyListState
import androidx.compose.material3.Text
import androidx.compose.material3.scrollbar
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp

val state = rememberLazyListState()

LazyColumn(
    state = state,
    modifier =
        Modifier.fillMaxSize()
            .scrollbar(state.scrollIndicatorState, orientation = Orientation.Vertical),
) {
    items(100) { index ->
        Text(
            text = "Item $index",
            modifier = Modifier.fillMaxWidth().height(50.dp).wrapContentSize(Alignment.Center),
        )
    }
}

To use a scrollbar with a androidx.compose.foundation.layout.Column that uses androidx.compose.foundation.verticalScroll, see:

import androidx.compose.foundation.gestures.Orientation
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.wrapContentSize
import androidx.compose.foundation.rememberScrollState
import androidx.compose.foundation.verticalScroll
import androidx.compose.material3.Text
import androidx.compose.material3.scrollbar
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp

val state = rememberScrollState()

Column(
    modifier =
        Modifier.fillMaxSize()
            // Chain before verticalScroll so the scrollbar doesn't scroll with content.
            .scrollbar(state.scrollIndicatorState, orientation = Orientation.Vertical)
            .verticalScroll(state)
) {
    repeat(100) { index ->
        Text(
            text = "Item $index",
            modifier = Modifier.fillMaxWidth().height(50.dp).wrapContentSize(Alignment.Center),
        )
    }
}
Parameters
state: ScrollIndicatorState?

the ScrollIndicatorState that represents the scroll state. If null, the scrollbar will not be drawn.
orientation: Orientation

the orientation of the scrollbar.
thumbColor: Color = ScrollbarDefaults.thumbColor

the color of the scrollbar thumb.
trackColor: Color = Color.Transparent

the color of the scrollbar track.
thickness: Dp = ScrollbarDefaults.Thickness

the thickness of the scrollbar.
thumbMinLength: Dp = ScrollbarDefaults.ThumbMinLength

the minimum length of the scrollbar thumb. Note that the scrollbar will not be shown if the available track length is less than this minimum length.
thumbMaxLengthFraction: @FloatRange(from = 0.0, to = 1.0) Float = ScrollbarDefaults.ThumbMaxLengthFraction

the maximum length of the scrollbar thumb as a fraction of the viewport length. This should be between 0f and 1f.
isFadeEnabled: Boolean = true

whether the fade behavior is enabled. If enabled, the scrollbar will be shown when scrolling is active, and fades out after a delay when scrolling is idle. If disabled, the scrollbar remains always visible.
fadeDurationMillis: Int = ScrollbarDefaults.ThumbFadeDurationMillis

the duration of the fade animation in milliseconds.
fadeDelayMillis: Int = ScrollbarDefaults.ThumbFadeDelayMillis

the delay before the scrollbar fades out in milliseconds.
mainAxisTrackInset: Dp = ScrollbarDefaults.MainAxisTrackInset

the inset to apply to the scrollbar track along the main axis.
crossAxisTrackInset: Dp = ScrollbarDefaults.CrossAxisTrackInset

the inset to apply to the scrollbar track along the cross axis.