horizontalScroll

Compose Modifier

Common

fun Modifier.horizontalScroll(
    state: ScrollState,
    enabled: Boolean = true,
    flingBehavior: FlingBehavior? = null,
    reverseScrolling: Boolean = false,
) =
    scroll(
        state = state,
        isScrollable = enabled,
        reverseScrolling = reverseScrolling,
        flingBehavior = flingBehavior,
        isVertical = false,
        useLocalOverscrollFactory = true,
    )

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

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

See the other overload in order to provide a custom OverscrollEffect

Parameters


state	state of the scroll
enabled	whether or not scrolling via touch input is enabled
flingBehavior	logic describing fling behavior when drag has finished with velocity. If `null`, default from `ScrollableDefaults.flingBehavior` will be used.
reverseScrolling	reverse the direction of scrolling, when `true`, 0 `ScrollState.value` will mean right, when `false`, 0 `ScrollState.value` will mean left

Common

fun Modifier.horizontalScroll(
    state: ScrollState,
    overscrollEffect: OverscrollEffect?,
    enabled: Boolean = true,
    flingBehavior: FlingBehavior? = null,
    reverseScrolling: Boolean = false,
) =
    scroll(
        state = state,
        isScrollable = enabled,
        reverseScrolling = reverseScrolling,
        flingBehavior = flingBehavior,
        isVertical = false,
        useLocalOverscrollFactory = false,
        overscrollEffect = overscrollEffect,
    )

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

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

Parameters


state	state of the scroll
overscrollEffect	the `OverscrollEffect` that will be used to render overscroll for this modifier. Note that the `OverscrollEffect.node` will be applied internally as well - you do not need to use Modifier.overscroll separately.
enabled	whether or not scrolling via touch input is enabled
flingBehavior	logic describing fling behavior when drag has finished with velocity. If `null`, default from `ScrollableDefaults.flingBehavior` will be used.
reverseScrolling	reverse the direction of scrolling, when `true`, 0 `ScrollState.value` will mean right, when `false`, 0 `ScrollState.value` will mean left

Code Examples

HorizontalScrollSample

@Composable
fun HorizontalScrollSample() {
    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)
    )
}