A modern programming language that makes developers happier.

kotlinlang

I’m trying to implement `LazyColumn`, which contains multiple `LazyRow`s scrolled together. The idea is to apply a horizontal `scrollable` Modifier on a `LazyColumn`, get scrolled delta, and manually `scrollBy` all the rows (code in thread). This works correctly when I’m scrolling up-down slowly, but it breaks on faster scrolls. I thought some synchronization mechanism was needed here; however, implementing it didn’t help. Do you see how I can improve it? Or why does it happen?

scroll_incorrect.mp4

scroll_correct.mp4

```TwoWayScrollableList(
    rowItems = (0..10).map { it.toString() },
    listSize = 100,
)


@Composable
fun TwoWayScrollableList(
    rowItems: List&lt;String&gt;,
    listSize: Int,
) {

    val states = (0..listSize).map { rememberLazyListState() }
    val scope = rememberCoroutineScope()
    val scrollState = rememberScrollableState { delta -&gt;
        scope.launch {
            states.forEach {
                it.scrollBy(-delta)
            }
        }
        delta
    }

    LazyColumn(
        modifier = Modifier.scrollable(scrollState, Orientation.Horizontal, flingBehavior = ScrollableDefaults.flingBehavior())
    ) {
        itemsIndexed(items = states) { _, item -&gt;
            LazyRow(
                state = item,
                userScrollEnabled = false,
            ) {
                itemsIndexed(items = rowItems) { _, item -&gt;
                    Text(
                        text = item,
                        textAlign = TextAlign.Center,
                        fontSize = 25.sp,
                        modifier = Modifier.width(100.dp).background(color = Color.Gray)
                    )
                }
            }
            Spacer(modifier = Modifier.height(2.dp))
        }
    }
}```

i think it would be much easier if you use a regular row instead of the lazy one, and then apply the scrollable modifier. that way you won’t have to create $listSize lazyListStates, and use a single scrollableState on all rows. of course it only works if you have a limited number of items in a row, but that was my solution, when i had a similar problem

for reference, in my problem we had a horizontal list of a vertical lists. the vertical lists contained items that in total would take up up to 2.5x the screen height. but the horizontal list could have 100 items. so the solution was a LazyRow of scrollable Columns

Thanks for the replay. I expect to have a large number of items in a row, so I need `LazyRow`. Also, I would like to get `stickyHeader` easily.
I discovered that because `Lazy` is reusing containers, I can reuse `LazyListState` as well; however, I need to find a way how to implement it the nice way because, for now, it’s somewhat hacky. :smile: