Start native apps faster with the Composables CLI ->
Composable Function

nonInteractiveScrollbar

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

NonInteractiveScrollbarWithLazyColumnSample

@Composable
fun NonInteractiveScrollbarWithLazyColumnSample() {
    val state = rememberLazyListState()
    val scrollIndicatorState = state.scrollIndicatorState
    val scrollbarModifier =
        if (scrollIndicatorState != null) {
            Modifier.nonInteractiveScrollbar(
                scrollIndicatorState,
                orientation = Orientation.Vertical,
            )
        } else {
            Modifier
        }
    LazyColumn(state = state, modifier = Modifier.fillMaxSize().then(scrollbarModifier)) {
        items(100) { index ->
            Text(
                text = "Item $index",
                modifier = Modifier.fillMaxWidth().height(50.dp).wrapContentSize(Alignment.Center),
            )
        }
    }
}

NonInteractiveScrollbarWithVerticalScrollSample

@Composable
fun NonInteractiveScrollbarWithVerticalScrollSample() {
    val state = rememberScrollState()
    val scrollIndicatorState = state.scrollIndicatorState
    val scrollbarModifier =
        if (scrollIndicatorState != null) {
            Modifier.nonInteractiveScrollbar(
                scrollIndicatorState,
                orientation = Orientation.Vertical,
            )
        } else {
            Modifier
        }
    Column(
        modifier =
            Modifier.fillMaxSize()
                // Chain before verticalScroll so the scrollbar doesn't scroll with content.
                .then(scrollbarModifier)
                .verticalScroll(state)
    ) {
        repeat(100) { index ->
            Text(
                text = "Item $index",
                modifier = Modifier.fillMaxWidth().height(50.dp).wrapContentSize(Alignment.Center),
            )
        }
    }
}

Last updated: