ScrollState

class ScrollState(initial: Int) : ScrollableState

State of the scroll. Allows the developer to change the scroll position or get current state by calling methods on this object. To be hosted and passed to Modifier.verticalScroll or Modifier.horizontalScroll

To create and automatically remember ScrollState with default parameters use rememberScrollState.

Learn how to control the state of Modifier.verticalScroll or Modifier.horizontalScroll:

Parameters

Properties

@get:FrequentlyChangingValue
var value: Int

current scroll position value in pixels

var maxValue: Int

maximum bound for value, or Int.MAX_VALUE if still unknown

var viewportSize: Int

Size of the viewport on the scrollable axis, or 0 if still unknown. Note that this value is only populated after the first measure pass.

val interactionSource: InteractionSource

InteractionSource that will be used to dispatch drag events when this list is being dragged. If you want to know whether the fling (or smooth scroll) is in progress, use isScrollInProgress.

Functions

suspend fun animateScrollTo(value: Int, animationSpec: AnimationSpec<Float> = SpringSpec())

Scroll to position in pixels with animation.

Parameters

suspend fun scrollTo(value: Int): Float

Instantly jump to the given position in pixels.

Cancels the currently running scroll, if any, and suspends until the cancellation is complete.

Parameters

Returns

Companion Object

Properties

val Saver: Saver<ScrollState, *>

The default Saver implementation for ScrollState.

Code Examples

ControlledScrollableRowSample

@Composable
fun ControlledScrollableRowSample() {
    // Create ScrollState to own it and be able to control scroll behaviour of scrollable Row below
    val scrollState = rememberScrollState()
    val scope = rememberCoroutineScope()
    Column {
        Row(Modifier.horizontalScroll(scrollState)) { repeat(1000) { index -> Square(index) } }
        // Controls for scrolling
        Row(verticalAlignment = Alignment.CenterVertically) {
            Text("Scroll")
            Button(onClick = { scope.launch { scrollState.scrollTo(scrollState.value - 1000) } }) {
                Text("< -")
            }
            Button(onClick = { scope.launch { scrollState.scrollBy(10000f) } }) { Text("--- >") }
        }
        Row(verticalAlignment = Alignment.CenterVertically) {
            Text("Smooth Scroll")
            Button(
                onClick = { scope.launch { scrollState.animateScrollTo(scrollState.value - 1000) } }
            ) {
                Text("< -")
            }
            Button(onClick = { scope.launch { scrollState.animateScrollBy(10000f) } }) {
                Text("--- >")
            }
        }
    }
}