HI, is it possible to synchronize scrolling for mu...

# compose

[Giorgi]

HI, is it possible to synchronize scrolling for multiple LazyColumns? I tried to share rememberLazyListState but this has strange behavior

[Winson Chiu]

What strange behavior did you hit? I recently did this with multiple rows and it seems to work for me.

[Winson Chiu]

Ah, wait, my rows weren't lazy. I think that might the problem, because the lazy layouts don't use absolute offsets.

[Winson Chiu]

They target item positions, because they don't know the total range since it's lazy.

[Giorgi]

sometimes one columnt would scroll slighly then it would scroll first column

[Winson Chiu]

What's the UI you're trying to achieve? You can get close to parallel lazy columns with a LazyStaggeredVerticalGrid. Although you'd need custom logic to sort your items into spans instead of sequentially, since LSVG will layout left to right first.

[Giorgi]

well, the layout is quite complex and probably will take me a lot of messages and pics to explain

[Seri]

rememberLazyListState() has a lot of internal logic which manages visible items, fetching logic, as well as the scroll state. I wouldn't expect it to just work compared to something simpler, like rememberScrollState()

[Seri]

but LazyListState inherits from ScrollableState, so maybe something like having a "parent" and "child" scrolling layout would be possible

[Winson Chiu]

If you want to approximate it without major changes, maybe you can intercept scrolling on any column and call scrollBy(delta) on all of the columns.

[Giorgi]

in short I want something like stickyHeader on left side and also on the bottom

[Giorgi]

Currently I have LazyRow

[Giorgi]

okay, 1 min, at least I will give you a pic

[Giorgi]

So Im making something like a chart.

The change is that there will be more than one user and this chart will need to be scrolled top and bottom. it already scrolls right and left. So that means I have to add 2 StickyHeader one on left for users and one on bottom for timeline. but StickyHeader only works at top 😕

[Giorgi]

one idea I have is to have scrollable items in the row, but timeline will be static

[Giorgi]

and users will appear on separate list

[Winson Chiu]

It sounds like your timeline doesn't have to be part of the lazy layout at all. Just making it static but sync based on some listener on the scroll state seems fine. The same for the left side, too.

[Giorgi]

So if someone wants 2 LazyColumn's scroll being synchronised, here it is

@Composable
fun SynchronizedScrollLazyColumns() {
    val leftListState = rememberLazyListState()
    val rightListState = rememberLazyListState()
    val coroutineScope = rememberCoroutineScope()

    fun syncScroll(leading: LazyListState, following: LazyListState) {
        coroutineScope.launch {
            val scrollPosition = leading.firstVisibleItemScrollOffset
            following.scrollToItem(
                index = leading.firstVisibleItemIndex,
                scrollOffset = scrollPosition
            )
        }
    }

    // Observe scroll changes in the LEFT column
    LaunchedEffect(leftListState.firstVisibleItemIndex, leftListState.firstVisibleItemScrollOffset) {
        syncScroll(leftListState, rightListState)
    }

    // Observe scroll changes in the RIGHT column
    LaunchedEffect(rightListState.firstVisibleItemIndex, rightListState.firstVisibleItemScrollOffset) {
        syncScroll(rightListState, leftListState)
    }
    Row(
        modifier = Modifier
            .fillMaxSize()
            .padding(16.dp)
    ) {
        // Left Column (Leading Column)
        LazyColumn(
            modifier = Modifier
                .weight(1f),
            state = leftListState
        ) {
            items(20) { index ->
                Card(
                    modifier = Modifier
                        .fillMaxWidth()
                        .padding(4.dp),
                    elevation = CardDefaults.cardElevation(4.dp)
                ) {
                    Text(
                        text = "Left Item $index",
                        modifier = Modifier.padding(16.dp)
                    )
                }
            }
        }

        Spacer(modifier = Modifier.width(8.dp))

        // Right Column (Following Column)
        LazyColumn(
            modifier = Modifier
                .weight(1f),
            state = rightListState
        ) {
            items(20) { index ->
                Card(
                    modifier = Modifier
                        .fillMaxWidth()
                        .padding(4.dp),
                    elevation = CardDefaults.cardElevation(4.dp)
                ) {
                    Text(
                        text = "Right Item $index",
                        modifier = Modifier.padding(16.dp)
                    )
                }
            }
        }
    }
}