ScrollState

Class

Common
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

initialvalue of the scroll

Properties

Common
var value: Int

current scroll position value in pixels

Common
var maxValue: Int

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

Common
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.

Common
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

valuetarget value in pixels to smooth scroll to, value will be coerced to 0..maxPosition
animationSpecanimation curve for smooth scroll animation
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

valuenumber of pixels to scroll by

Returns

the amount of scroll consumed

Companion Object

Properties

Common
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("--- >")
            }
        }
    }
}