A visual-only scrollbar that represents the current scroll position of a scrolling component.
@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),
)
}
}
}
@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),
)
}
}
}