Why scrollable modifier doesn't scroll view content?

Question

I am trying to get scrolling to work on a Column where the number of entries may exceed the height of the window.

I'm currently using Compose 1.1.0-rc03 and at the moment I'm only trying to get it working on desktop.

I reduced the problem to this:

@Composable
fun App() {
    val optionsScrollState = rememberScrollState()

    Row(modifier = Modifier.fillMaxSize()) {
        // Left column
        Column(
            modifier = Modifier
                .scrollable(optionsScrollState, Orientation.Vertical)
                .width(240.dp)
                .fillMaxHeight()
        ) {
            (1..100).forEach { i -> Text("Row $i") }
        }
    }
}

But this doesn't scroll, or at least, not with the mousewheel. Maybe there's another way to scroll that isn't immediately apparent to me.

How do I make this work?

The docs on scrollable say that I might have to manage the state myself. So is using rememberScrollState() not enough?

I found some existing questions about disabling scrolling on columns, but they were always talking about LazyColumn which I'm not using here.

Answer 1

You're using a wrong modifier. From documentation:

The scrollable modifier differs from the scroll modifiers in that scrollable detects the scroll gestures, but does not offset its contents.

If you're interested how Modifier.scrollable should be used, you can find an example in the same documentation chapter.

---

You can use Modifier.verticalScroll instead, which will give you the expected behavior.

Also consider switching to LazyColumn, which already has built-in scrolling as well as lazy cell loading.