Skip to content

Scrollable

@Composable



fun Scrollable(
    direction: ScrollDirection = ScrollDirection.VERTICAL, 
    scrollbarColor: KColor = KColor.DARK_GRAY, 
    modifier: Modifier = Modifier, 
    state: ScrollableState = rememberScrollableState(), 
    content: @Composable



 () -> Unit
)

A container that allows its single child to be scrolled when the child's content exceeds the container's bounds.

A fade-in/out scrollbar thumb is rendered automatically when content overflows. The scrollbar supports mouse-drag interaction and responds to the keyboard arrow keys, Page Up/Down.

Example

Scrollable(modifier = Modifier.size(200, 100)) {
    Column {
        repeat(20) { Text(Component.literal("Item $it")) }
    }
}

Parameters

  • direction: The ScrollDirection (vertical or horizontal).

  • scrollbarColor: The fill colour of the scrollbar thumb.

  • modifier: Modifiers applied to the Scrollable layout node.

  • state: External ScrollableState; defaults to a locally remembered instance.

  • content: The single scrollable child composable.