# scrollableArea

Common/AllAndroid/JVM

## Functions summary

|---|---|---|
| `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier` | `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier.https://developer.android.com/reference/kotlin/androidx/compose/foundation/scrollableArea.modifier#(androidx.compose.ui.Modifier).scrollableArea(androidx.compose.foundation.gestures.ScrollableState,androidx.compose.foundation.gestures.Orientation,kotlin.Boolean,kotlin.Boolean,androidx.compose.foundation.gestures.FlingBehavior,androidx.compose.foundation.interaction.MutableInteractionSource,androidx.compose.foundation.gestures.BringIntoViewSpec)( state: https://developer.android.com/reference/kotlin/androidx/compose/foundation/gestures/ScrollableState, orientation: https://developer.android.com/reference/kotlin/androidx/compose/foundation/gestures/Orientation, enabled: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html, reverseScrolling: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html, flingBehavior: https://developer.android.com/reference/kotlin/androidx/compose/foundation/gestures/FlingBehavior?, interactionSource: https://developer.android.com/reference/kotlin/androidx/compose/foundation/interaction/MutableInteractionSource?, bringIntoViewSpec: https://developer.android.com/reference/kotlin/androidx/compose/foundation/gestures/BringIntoViewSpec? )` Configure a component to act as a scrollable area. | Cmn |
| `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier` | `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier.https://developer.android.com/reference/kotlin/androidx/compose/foundation/scrollableArea.modifier#(androidx.compose.ui.Modifier).scrollableArea(androidx.compose.foundation.gestures.ScrollableState,androidx.compose.foundation.gestures.Orientation,androidx.compose.foundation.OverscrollEffect,kotlin.Boolean,kotlin.Boolean,androidx.compose.foundation.gestures.FlingBehavior,androidx.compose.foundation.interaction.MutableInteractionSource,androidx.compose.foundation.gestures.BringIntoViewSpec)( state: https://developer.android.com/reference/kotlin/androidx/compose/foundation/gestures/ScrollableState, orientation: https://developer.android.com/reference/kotlin/androidx/compose/foundation/gestures/Orientation, overscrollEffect: https://developer.android.com/reference/kotlin/androidx/compose/foundation/OverscrollEffect?, enabled: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html, reverseScrolling: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html, flingBehavior: https://developer.android.com/reference/kotlin/androidx/compose/foundation/gestures/FlingBehavior?, interactionSource: https://developer.android.com/reference/kotlin/androidx/compose/foundation/interaction/MutableInteractionSource?, bringIntoViewSpec: https://developer.android.com/reference/kotlin/androidx/compose/foundation/gestures/BringIntoViewSpec? )` Configure a component to act as a scrollable area. | Cmn |

## Functions

### Modifier.scrollableArea

Cmn Artifact: [androidx.compose.foundation:foundation](https://developer.android.com/jetpack/androidx/releases/compose-foundation) [View Source](https://cs.android.com/search?q=file:androidx/compose/foundation/ScrollableArea.kt+function:scrollableArea) Added in [1.10.0](https://developer.android.com/jetpack/androidx/releases/compose-foundation#1.10.0)

```
fun Modifier.scrollableArea(
    state: ScrollableState,
    orientation: Orientation,
    enabled: Boolean = true,
    reverseScrolling: Boolean = false,
    flingBehavior: FlingBehavior? = null,
    interactionSource: MutableInteractionSource? = null,
    bringIntoViewSpec: BringIntoViewSpec? = null
): Modifier
```

Configure a component to act as a scrollable area. A scrollable area clips its content to its bounds, renders overscroll, and handles scroll gestures such that the content, not the viewport, moves with the user's gestures.

This modifier is a building block for creating custom scrollable containers, and serves as a higher-level abstraction over `https://developer.android.com/reference/kotlin/androidx/compose/foundation/gestures/scrollable.modifier#(androidx.compose.ui.Modifier).scrollable(androidx.compose.foundation.gestures.ScrollableState,androidx.compose.foundation.gestures.Orientation,kotlin.Boolean,kotlin.Boolean,androidx.compose.foundation.gestures.FlingBehavior,androidx.compose.foundation.interaction.MutableInteractionSource)`. For simpler use cases, prefer higher-level components that are built with `scrollableArea`, such as `https://developer.android.com/reference/kotlin/androidx/compose/foundation/verticalScroll.modifier#(androidx.compose.ui.Modifier).verticalScroll(androidx.compose.foundation.ScrollState,kotlin.Boolean,androidx.compose.foundation.gestures.FlingBehavior,kotlin.Boolean)` and `https://developer.android.com/reference/kotlin/androidx/compose/foundation/lazy/LazyColumn.composable#LazyColumn(androidx.compose.ui.Modifier,androidx.compose.foundation.lazy.LazyListState,androidx.compose.foundation.layout.PaddingValues,kotlin.Boolean,androidx.compose.foundation.layout.Arrangement.Vertical,androidx.compose.ui.Alignment.Horizontal,androidx.compose.foundation.gestures.FlingBehavior,kotlin.Boolean,androidx.compose.foundation.OverscrollEffect,androidx.compose.foundation.lazy.layout.LazyLayoutCacheWindow,kotlin.Function1)`. For example, `https://developer.android.com/reference/kotlin/androidx/compose/foundation/verticalScroll.modifier#(androidx.compose.ui.Modifier).verticalScroll(androidx.compose.foundation.ScrollState,kotlin.Boolean,androidx.compose.foundation.gestures.FlingBehavior,kotlin.Boolean)` offsets the content in the viewport out of the box to have scrollable container behavior.

The primary distinction between `scrollable` and `scrollableArea` is in how scroll deltas are handled. `scrollableArea` inverts the deltas to provide a natural "content-moving" experience. For instance, dragging a finger up results in a positive scroll delta, which accommodates content moving upwards within the layout. In contrast, the lower-level `scrollable` provides raw, un-inverted deltas, which is useful for custom gesture handling that isn't directly tied to content scrolling.

The direction of scrolling is automatically adjusted based on the `https://developer.android.com/reference/kotlin/androidx/compose/foundation/package-summary#(androidx.compose.ui.Modifier).scrollableArea(androidx.compose.foundation.gestures.ScrollableState,androidx.compose.foundation.gestures.Orientation,kotlin.Boolean,kotlin.Boolean,androidx.compose.foundation.gestures.FlingBehavior,androidx.compose.foundation.interaction.MutableInteractionSource,androidx.compose.foundation.gestures.BringIntoViewSpec)`, the current `https://developer.android.com/reference/kotlin/androidx/compose/ui/platform/package-summary#LocalLayoutDirection()`, and the `https://developer.android.com/reference/kotlin/androidx/compose/foundation/package-summary#(androidx.compose.ui.Modifier).scrollableArea(androidx.compose.foundation.gestures.ScrollableState,androidx.compose.foundation.gestures.Orientation,kotlin.Boolean,kotlin.Boolean,androidx.compose.foundation.gestures.FlingBehavior,androidx.compose.foundation.interaction.MutableInteractionSource,androidx.compose.foundation.gestures.BringIntoViewSpec)` flag. Setting `https://developer.android.com/reference/kotlin/androidx/compose/foundation/package-summary#(androidx.compose.ui.Modifier).scrollableArea(androidx.compose.foundation.gestures.ScrollableState,androidx.compose.foundation.gestures.Orientation,kotlin.Boolean,kotlin.Boolean,androidx.compose.foundation.gestures.FlingBehavior,androidx.compose.foundation.interaction.MutableInteractionSource,androidx.compose.foundation.gestures.BringIntoViewSpec)` to `true` is useful for layouts that grow from the end of the container to the beginning, like a chat feed. In such cases, the content within the container should also be laid out in reverse. The following table summarizes the resulting scroll delta for a user's drag gesture:

|---|---|---|---|---|
| `orientation` | `LayoutDirection` | `reverseScrolling` | User Gesture | Scroll Delta |
| `Vertical` | `Ltr` and `Rtl` | `false` | Drag Up | Positive |
| `Vertical` | `Ltr` and `Rtl` | `true` | Drag Up | Negative |
| `Horizontal` | `Ltr` | `false` | Drag Left | Positive |
| `Horizontal` | `Ltr` | `true` | Drag Left | Negative |
| `Horizontal` | `Rtl` | `false` | Drag Left | Negative |
| `Horizontal` | `Rtl` | `true` | Drag Left | Positive |

This `scrollableArea` overload uses overscroll provided through `https://developer.android.com/reference/kotlin/androidx/compose/foundation/package-summary#LocalOverscrollFactory()` by default. See the other overload to manually provide an `https://developer.android.com/reference/kotlin/androidx/compose/foundation/OverscrollEffect` instance, or disable overscroll.

```kotlin
import androidx.compose.foundation.background
import androidx.compose.foundation.gestures.Orientation
import androidx.compose.foundation.gestures.ScrollableState
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.scrollableArea
import androidx.compose.material3.Text
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.layout.Layout
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import androidx.compose.ui.util.fastCoerceIn

// This sample demonstrates how to create custom scrollable containers using the scrollableArea
// modifier.

// This ScrollableAreaSampleScrollState holds the scroll position and other relevant
// information. It implements the ScrollableState interface, making it compatible with the
// scrollableArea modifier, and is similar in function to the ScrollState used with
// Modifier.verticalScroll.
val scrollState = rememberScrollableAreaSampleScrollState()

// For lists with many items, consider using a LazyLayout instead
Layout(
    modifier =
        Modifier.size(150.dp)
            .scrollableArea(scrollState, Orientation.Vertical)
            .background(Color.LightGray),
    content = {
        repeat(40) {
            Text(
                modifier = Modifier.padding(vertical = 2.dp),
                text = "Item $it",
                fontSize = 24.sp,
                textAlign = TextAlign.Center,
            )
        }
    },
) { measurables, constraints ->
    var totalHeight = 0

    val childConstraints = constraints.copy(minWidth = 0, minHeight = 0)
    val placeables = measurables.map { measurable ->
        val placeable = measurable.measure(childConstraints)
        totalHeight += placeable.height
        placeable
    }

    val viewportHeight = constraints.maxHeight
    // Update the maximum scroll value to not scroll beyond limits and stop when scroll
    // reaches the end.
    scrollState.maxValue = (totalHeight - viewportHeight).coerceAtLeast(0)

    // Position the children within the layout.
    layout(constraints.maxWidth, viewportHeight) {
        // The current vertical scroll position, in pixels.
        val scrollY = scrollState.value
        val viewportCenterY = scrollY + viewportHeight / 2

        var placeableLayoutPositionY = 0
        placeables.forEach { placeable ->
            // This sample applies a scaling effect to items based on their distance
            // from the center, creating a wheel-like effect.
            val itemCenterY = placeableLayoutPositionY + placeable.height / 2
            val distanceFromCenter = abs(itemCenterY - viewportCenterY)
            val normalizedDistance =
                (distanceFromCenter / (viewportHeight / 2f)).fastCoerceIn(0f, 1f)

            // Items scale between 0.4 at the edges of the viewport and 1 at the center.
            val scaleFactor = 1f - (normalizedDistance * 0.6f)

            // Place the item horizontally centered with a layer transformation for
            // scaling to achieve wheel-like effect.
            placeable.placeRelativeWithLayer(
                x = constraints.maxWidth / 2 - placeable.width / 2,
                // Offset y by the scroll position to make placeable visible in the viewport.
                y = placeableLayoutPositionY - scrollY,
            ) {
                scaleX = scaleFactor
                scaleY = scaleFactor
            }
            // Move to the next item's vertical position.
            placeableLayoutPositionY += placeable.height
        }
    }
}
```

| Parameters |
|---|---|
| `state: https://developer.android.com/reference/kotlin/androidx/compose/foundation/gestures/ScrollableState` | The `https://developer.android.com/reference/kotlin/androidx/compose/foundation/gestures/ScrollableState` of the component. |
| `orientation: https://developer.android.com/reference/kotlin/androidx/compose/foundation/gestures/Orientation` | The `https://developer.android.com/reference/kotlin/androidx/compose/foundation/gestures/Orientation` of scrolling. |
| `enabled: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html = true` | Whether scrolling is enabled. |
| `reverseScrolling: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html = false` | reverses the direction of scrolling. This is useful for experiences where new items appear at the end and the list grows backwards. When `reverseScrolling` is true, the layout of the content inside the container should also be reversed by the user. For example, in a `https://developer.android.com/reference/kotlin/androidx/compose/foundation/verticalScroll.modifier#(androidx.compose.ui.Modifier).verticalScroll(androidx.compose.foundation.ScrollState,kotlin.Boolean,androidx.compose.foundation.gestures.FlingBehavior,kotlin.Boolean)`, setting `reverseScrolling` true will cause items to be laid out from bottom to top. When using `scrollableArea` directly in custom list implementations, ensure your layout logic also arranges content in reverse order (e.g. from end to start) to match the scroll behavior. |
| `flingBehavior: https://developer.android.com/reference/kotlin/androidx/compose/foundation/gestures/FlingBehavior? = null` | logic describing fling behavior when drag has finished with velocity. If `null`, default from `https://developer.android.com/reference/kotlin/androidx/compose/foundation/gestures/ScrollableDefaults#flingBehavior()` will be used. |
| `interactionSource: https://developer.android.com/reference/kotlin/androidx/compose/foundation/interaction/MutableInteractionSource? = null` | an optional hoisted `https://developer.android.com/reference/kotlin/androidx/compose/foundation/interaction/MutableInteractionSource` for observing and emitting `https://developer.android.com/reference/kotlin/androidx/compose/foundation/interaction/Interaction`s for this scrollable area. Note that if `null` is provided, interactions will still happen internally. |
| `bringIntoViewSpec: https://developer.android.com/reference/kotlin/androidx/compose/foundation/gestures/BringIntoViewSpec? = null` | The configuration that this scrollable area should use to perform scrolling when scroll requests are received from the focus system. If `null` is provided, the system will use the behavior provided by `https://developer.android.com/reference/kotlin/androidx/compose/foundation/gestures/package-summary#LocalBringIntoViewSpec()` which by default has a platform dependent implementation. |

### Modifier.scrollableArea

Cmn Artifact: [androidx.compose.foundation:foundation](https://developer.android.com/jetpack/androidx/releases/compose-foundation) [View Source](https://cs.android.com/search?q=file:androidx/compose/foundation/ScrollableArea.kt+function:scrollableArea) Added in [1.10.0](https://developer.android.com/jetpack/androidx/releases/compose-foundation#1.10.0)

```
fun Modifier.scrollableArea(
    state: ScrollableState,
    orientation: Orientation,
    overscrollEffect: OverscrollEffect?,
    enabled: Boolean = true,
    reverseScrolling: Boolean = false,
    flingBehavior: FlingBehavior? = null,
    interactionSource: MutableInteractionSource? = null,
    bringIntoViewSpec: BringIntoViewSpec? = null
): Modifier
```

Configure a component to act as a scrollable area. A scrollable area clips its content to its bounds, renders overscroll, and handles scroll gestures such that the content, not the viewport, moves with the user's gestures.

This modifier is a building block for creating custom scrollable containers, and serves as a higher-level abstraction over `https://developer.android.com/reference/kotlin/androidx/compose/foundation/gestures/scrollable.modifier#(androidx.compose.ui.Modifier).scrollable(androidx.compose.foundation.gestures.ScrollableState,androidx.compose.foundation.gestures.Orientation,kotlin.Boolean,kotlin.Boolean,androidx.compose.foundation.gestures.FlingBehavior,androidx.compose.foundation.interaction.MutableInteractionSource)`. For simpler use cases, prefer higher-level components that are built with `scrollableArea`, such as `https://developer.android.com/reference/kotlin/androidx/compose/foundation/verticalScroll.modifier#(androidx.compose.ui.Modifier).verticalScroll(androidx.compose.foundation.ScrollState,kotlin.Boolean,androidx.compose.foundation.gestures.FlingBehavior,kotlin.Boolean)` and `https://developer.android.com/reference/kotlin/androidx/compose/foundation/lazy/LazyColumn.composable#LazyColumn(androidx.compose.ui.Modifier,androidx.compose.foundation.lazy.LazyListState,androidx.compose.foundation.layout.PaddingValues,kotlin.Boolean,androidx.compose.foundation.layout.Arrangement.Vertical,androidx.compose.ui.Alignment.Horizontal,androidx.compose.foundation.gestures.FlingBehavior,kotlin.Boolean,androidx.compose.foundation.OverscrollEffect,androidx.compose.foundation.lazy.layout.LazyLayoutCacheWindow,kotlin.Function1)`. For example, `https://developer.android.com/reference/kotlin/androidx/compose/foundation/verticalScroll.modifier#(androidx.compose.ui.Modifier).verticalScroll(androidx.compose.foundation.ScrollState,kotlin.Boolean,androidx.compose.foundation.gestures.FlingBehavior,kotlin.Boolean)` offsets the content in the viewport out of the box to have scrollable container behavior.

The primary distinction between `scrollable` and `scrollableArea` is in how scroll deltas are handled. `scrollableArea` inverts the deltas to provide a natural "content-moving" experience. For instance, dragging a finger up results in a positive scroll delta, which accommodates content moving upwards within the layout. In contrast, the lower-level `scrollable` provides raw, un-inverted deltas, which is useful for custom gesture handling that isn't directly tied to content scrolling.

The direction of scrolling is automatically adjusted based on the `https://developer.android.com/reference/kotlin/androidx/compose/foundation/package-summary#(androidx.compose.ui.Modifier).scrollableArea(androidx.compose.foundation.gestures.ScrollableState,androidx.compose.foundation.gestures.Orientation,androidx.compose.foundation.OverscrollEffect,kotlin.Boolean,kotlin.Boolean,androidx.compose.foundation.gestures.FlingBehavior,androidx.compose.foundation.interaction.MutableInteractionSource,androidx.compose.foundation.gestures.BringIntoViewSpec)`, the current `https://developer.android.com/reference/kotlin/androidx/compose/ui/platform/package-summary#LocalLayoutDirection()`, and the `https://developer.android.com/reference/kotlin/androidx/compose/foundation/package-summary#(androidx.compose.ui.Modifier).scrollableArea(androidx.compose.foundation.gestures.ScrollableState,androidx.compose.foundation.gestures.Orientation,androidx.compose.foundation.OverscrollEffect,kotlin.Boolean,kotlin.Boolean,androidx.compose.foundation.gestures.FlingBehavior,androidx.compose.foundation.interaction.MutableInteractionSource,androidx.compose.foundation.gestures.BringIntoViewSpec)` flag. Setting `https://developer.android.com/reference/kotlin/androidx/compose/foundation/package-summary#(androidx.compose.ui.Modifier).scrollableArea(androidx.compose.foundation.gestures.ScrollableState,androidx.compose.foundation.gestures.Orientation,androidx.compose.foundation.OverscrollEffect,kotlin.Boolean,kotlin.Boolean,androidx.compose.foundation.gestures.FlingBehavior,androidx.compose.foundation.interaction.MutableInteractionSource,androidx.compose.foundation.gestures.BringIntoViewSpec)` to `true` is useful for layouts that grow from the end of the container to the beginning, like a chat feed. In such cases, the content within the container should also be laid out in reverse. The following table summarizes the resulting scroll delta for a user's drag gesture:

|---|---|---|---|---|
| `orientation` | `LayoutDirection` | `reverseScrolling` | User Gesture | Scroll Delta |
| `Vertical` | `Ltr` and `Rtl` | `false` | Drag Up | Positive |
| `Vertical` | `Ltr` and `Rtl` | `true` | Drag Up | Negative |
| `Horizontal` | `Ltr` | `false` | Drag Left | Positive |
| `Horizontal` | `Ltr` | `true` | Drag Left | Negative |
| `Horizontal` | `Rtl` | `false` | Drag Left | Negative |
| `Horizontal` | `Rtl` | `true` | Drag Left | Positive |

This overload allows providing `https://developer.android.com/reference/kotlin/androidx/compose/foundation/OverscrollEffect` that will be rendered within the scrollable area. See the other overload of `scrollableArea` in order to use a default `https://developer.android.com/reference/kotlin/androidx/compose/foundation/OverscrollEffect` provided by `https://developer.android.com/reference/kotlin/androidx/compose/foundation/package-summary#LocalOverscrollFactory()`.

```kotlin
import androidx.compose.foundation.background
import androidx.compose.foundation.gestures.Orientation
import androidx.compose.foundation.gestures.ScrollableState
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.scrollableArea
import androidx.compose.material3.Text
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.layout.Layout
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import androidx.compose.ui.util.fastCoerceIn

// This sample demonstrates how to create custom scrollable containers using the scrollableArea
// modifier.

// This ScrollableAreaSampleScrollState holds the scroll position and other relevant
// information. It implements the ScrollableState interface, making it compatible with the
// scrollableArea modifier, and is similar in function to the ScrollState used with
// Modifier.verticalScroll.
val scrollState = rememberScrollableAreaSampleScrollState()

// For lists with many items, consider using a LazyLayout instead
Layout(
    modifier =
        Modifier.size(150.dp)
            .scrollableArea(scrollState, Orientation.Vertical)
            .background(Color.LightGray),
    content = {
        repeat(40) {
            Text(
                modifier = Modifier.padding(vertical = 2.dp),
                text = "Item $it",
                fontSize = 24.sp,
                textAlign = TextAlign.Center,
            )
        }
    },
) { measurables, constraints ->
    var totalHeight = 0

    val childConstraints = constraints.copy(minWidth = 0, minHeight = 0)
    val placeables = measurables.map { measurable ->
        val placeable = measurable.measure(childConstraints)
        totalHeight += placeable.height
        placeable
    }

    val viewportHeight = constraints.maxHeight
    // Update the maximum scroll value to not scroll beyond limits and stop when scroll
    // reaches the end.
    scrollState.maxValue = (totalHeight - viewportHeight).coerceAtLeast(0)

    // Position the children within the layout.
    layout(constraints.maxWidth, viewportHeight) {
        // The current vertical scroll position, in pixels.
        val scrollY = scrollState.value
        val viewportCenterY = scrollY + viewportHeight / 2

        var placeableLayoutPositionY = 0
        placeables.forEach { placeable ->
            // This sample applies a scaling effect to items based on their distance
            // from the center, creating a wheel-like effect.
            val itemCenterY = placeableLayoutPositionY + placeable.height / 2
            val distanceFromCenter = abs(itemCenterY - viewportCenterY)
            val normalizedDistance =
                (distanceFromCenter / (viewportHeight / 2f)).fastCoerceIn(0f, 1f)

            // Items scale between 0.4 at the edges of the viewport and 1 at the center.
            val scaleFactor = 1f - (normalizedDistance * 0.6f)

            // Place the item horizontally centered with a layer transformation for
            // scaling to achieve wheel-like effect.
            placeable.placeRelativeWithLayer(
                x = constraints.maxWidth / 2 - placeable.width / 2,
                // Offset y by the scroll position to make placeable visible in the viewport.
                y = placeableLayoutPositionY - scrollY,
            ) {
                scaleX = scaleFactor
                scaleY = scaleFactor
            }
            // Move to the next item's vertical position.
            placeableLayoutPositionY += placeable.height
        }
    }
}
```

| Parameters |
|---|---|
| `state: https://developer.android.com/reference/kotlin/androidx/compose/foundation/gestures/ScrollableState` | The `https://developer.android.com/reference/kotlin/androidx/compose/foundation/gestures/ScrollableState` of the component. |
| `orientation: https://developer.android.com/reference/kotlin/androidx/compose/foundation/gestures/Orientation` | The `https://developer.android.com/reference/kotlin/androidx/compose/foundation/gestures/Orientation` of scrolling. |
| `overscrollEffect: https://developer.android.com/reference/kotlin/androidx/compose/foundation/OverscrollEffect?` | the `https://developer.android.com/reference/kotlin/androidx/compose/foundation/OverscrollEffect` that will be used to render overscroll for this scrollable area. Note that the `https://developer.android.com/reference/kotlin/androidx/compose/foundation/OverscrollEffect#node()` will be applied internally as well - you do not need to use Modifier.overscroll separately. |
| `enabled: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html = true` | Whether scrolling is enabled. |
| `reverseScrolling: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html = false` | reverses the direction of scrolling. This is useful for experiences where new items appear at the end and the list grows backwards. When `reverseScrolling` is true, the layout of the content inside the container should also be reversed by the user. For example, in a `https://developer.android.com/reference/kotlin/androidx/compose/foundation/verticalScroll.modifier#(androidx.compose.ui.Modifier).verticalScroll(androidx.compose.foundation.ScrollState,kotlin.Boolean,androidx.compose.foundation.gestures.FlingBehavior,kotlin.Boolean)`, setting `reverseScrolling` true will cause items to be laid out from bottom to top. When using `scrollableArea` directly in custom list implementations, ensure your layout logic also arranges content in reverse order (e.g. from end to start) to match the scroll behavior. |
| `flingBehavior: https://developer.android.com/reference/kotlin/androidx/compose/foundation/gestures/FlingBehavior? = null` | logic describing fling behavior when drag has finished with velocity. If `null`, default from `https://developer.android.com/reference/kotlin/androidx/compose/foundation/gestures/ScrollableDefaults#flingBehavior()` will be used. |
| `interactionSource: https://developer.android.com/reference/kotlin/androidx/compose/foundation/interaction/MutableInteractionSource? = null` | an optional hoisted `https://developer.android.com/reference/kotlin/androidx/compose/foundation/interaction/MutableInteractionSource` for observing and emitting `https://developer.android.com/reference/kotlin/androidx/compose/foundation/interaction/Interaction`s for this scrollable area. Note that if `null` is provided, interactions will still happen internally. |
| `bringIntoViewSpec: https://developer.android.com/reference/kotlin/androidx/compose/foundation/gestures/BringIntoViewSpec? = null` | The configuration that this scrollable area should use to perform scrolling when scroll requests are received from the focus system. If `null` is provided, the system will use the behavior provided by `https://developer.android.com/reference/kotlin/androidx/compose/foundation/gestures/package-summary#LocalBringIntoViewSpec()` which by default has a platform dependent implementation. |