{% setvar book_path %}/reference/androidx/_book.yaml{% endsetvar %} {% include "_shared/_reference-head-tags.html" %}

ScrollKt

public final class ScrollKt


Summary

Public methods

static final @NonNull Modifier
horizontalScroll(
    @NonNull Modifier receiver,
    @NonNull ScrollState state,
    boolean enabled,
    FlingBehavior flingBehavior,
    boolean reverseScrolling
)

Modify element to allow to scroll horizontally when width of the content is bigger than max constraints allow.

static final @NonNull ScrollState

Create and remember the ScrollState based on the currently appropriate scroll configuration to allow changing scroll position or observing scroll behavior.

static final @NonNull Modifier
verticalScroll(
    @NonNull Modifier receiver,
    @NonNull ScrollState state,
    boolean enabled,
    FlingBehavior flingBehavior,
    boolean reverseScrolling
)

Modify element to allow to scroll vertically when height of the content is bigger than max constraints allow.

Public methods

horizontalScroll

public static final @NonNull Modifier horizontalScroll(
    @NonNull Modifier receiver,
    @NonNull ScrollState state,
    boolean enabled,
    FlingBehavior flingBehavior,
    boolean reverseScrolling
)

Modify element to allow to scroll horizontally when width of the content is bigger than max constraints allow.

import androidx.compose.foundation.background
import androidx.compose.foundation.horizontalScroll
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.rememberScrollState
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Brush
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.TileMode
import androidx.compose.ui.unit.dp

val scrollState = rememberScrollState()
val gradient = Brush.horizontalGradient(
    listOf(Color.Red, Color.Blue, Color.Green), 0.0f, 10000.0f, TileMode.Repeated
)
Box(
    Modifier
        .horizontalScroll(scrollState)
        .size(width = 10000.dp, height = 200.dp)
        .background(brush = gradient)
)

In order to use this modifier, you need to create and own ScrollState

Parameters
@NonNull ScrollState state

state of the scroll

boolean enabled

whether or not scrolling via touch input is enabled

FlingBehavior flingBehavior

logic describing fling behavior when drag has finished with velocity. If null, default from ScrollableDefaults.flingBehavior will be used.

boolean reverseScrolling

reverse the direction of scrolling, when true, 0 ScrollState.value will mean right, when false, 0 ScrollState.value will mean left

rememberScrollState

@Composable
public static final @NonNull ScrollState rememberScrollState(int initial)

Create and remember the ScrollState based on the currently appropriate scroll configuration to allow changing scroll position or observing scroll behavior.

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

import androidx.compose.foundation.gestures.animateScrollBy
import androidx.compose.foundation.gestures.scrollBy
import androidx.compose.foundation.horizontalScroll
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.rememberScrollState
import androidx.compose.material.Text
import androidx.compose.runtime.rememberCoroutineScope
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier

// 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("--- >")
        }
    }
}
Parameters
int initial

initial scroller position to start with

verticalScroll

public static final @NonNull Modifier verticalScroll(
    @NonNull Modifier receiver,
    @NonNull ScrollState state,
    boolean enabled,
    FlingBehavior flingBehavior,
    boolean reverseScrolling
)

Modify element to allow to scroll vertically when height of the content is bigger than max constraints allow.

import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.requiredHeight
import androidx.compose.foundation.rememberScrollState
import androidx.compose.foundation.verticalScroll
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Brush
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.TileMode
import androidx.compose.ui.unit.dp

val scrollState = rememberScrollState()
val gradient = Brush.verticalGradient(
    listOf(Color.Red, Color.Blue, Color.Green), 0.0f, 10000.0f, TileMode.Repeated
)
Box(
    Modifier
        .verticalScroll(scrollState)
        .fillMaxWidth()
        .requiredHeight(10000.dp)
        .background(brush = gradient)
)

In order to use this modifier, you need to create and own ScrollState

Parameters
@NonNull ScrollState state

state of the scroll

boolean enabled

whether or not scrolling via touch input is enabled

FlingBehavior flingBehavior

logic describing fling behavior when drag has finished with velocity. If null, default from ScrollableDefaults.flingBehavior will be used.

boolean reverseScrolling

reverse the direction of scrolling, when true, 0 ScrollState.value will mean bottom, when false, 0 ScrollState.value will mean top