---
title: "verticalScroll"
description: "Modify element to allow to scroll vertically when height 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]"
type: "modifier"
---

<div class='type'>Compose Modifier</div>

<a id='references'></a>
<div class='sourceset sourceset-common'>Common</div>


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


Modify element to allow to scroll vertically when height 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 bottom, when `false`, 0 `ScrollState.value` will mean top |




<div class='sourceset sourceset-common'>Common</div>


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


Modify element to allow to scroll vertically when height 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 bottom, when `false`, 0 `ScrollState.value` will mean top |




## Code Examples
### VerticalScrollExample
```kotlin
@Composable
fun VerticalScrollExample() {
    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)
    )
}
```