I'm facing unwanted scroll behaviour in `LazyHoriz...

# compose

[AmrJyniat]

I'm facing unwanted scroll behaviour in LazyHorizontalGrid when implementing it inside HorizontalPager , the scrolling behaviour working fine on LazyHorizontalGrid when scroll to the next page direction, but when swipe pager to the previous page, it starts scrolling the items in the previous LazyHorizontalGrid page even before settle to the target page, how to prevent scrolling items when swiping between pages in pager?

CleanShot 2025-05-26 at 14.10.23.mp4

[AmrJyniat]

Here is the code of HorizontalPager and `LazyHorizontalGrid`:

HorizontalPager(
            state = pagerState,
            modifier = Modifier.fillMaxWidth(),
        ) { index ->
            val paletteGroup = palettesGroups[index]
            
            PalettesPage(
                pageIndex = index,
                selectedColor = selectedColor,
                paletteItems = paletteGroup.items,
                preDefinedItems = preDefinedItems,
                numberOfRows = numberOfRows,
                modifier = modifier,
                height = height,
                onColorSelected = onColorSelected,
            )
        }

@Composable
private fun PalettesPage(
    selectedColor: ColorItem?,
    paletteItems: List<ColorItem>,
    preDefinedItems: List<@Composable ((() -> Unit) -> Unit)>,
    numberOfRows: Int,
    modifier: Modifier,
    height: Dp,
    onColorSelected: (ColorItem) -> Unit,
    pageIndex: Int,
) {
    val gridScrollState = rememberLazyGridState()
    var selectedIndex by remember { mutableStateOf(0) }

    LazyHorizontalGrid(
        state = gridScrollState,
        rows = GridCells.Fixed(numberOfRows),
        contentPadding = PaddingValues(horizontal = 12.dp),
        modifier = modifier
            .fillMaxWidth()
            .height(height),
        verticalArrangement = Arrangement.spacedBy(8.dp),
        horizontalArrangement = Arrangement.spacedBy(8.dp),
    ) {

        itemsIndexed(paletteItems) { index, item ->
            PaletteItem(
                modifier = Modifier
                    .offset(x = if (numberOfRows == 2 && index % 2 == 1) 24.dp else 0.dp)
                    .size(44.dp),
                isSelected = selectedIndex == index + preDefinedItems.size,
                onSelected = {
                    onColorSelected(item)
                    selectedIndex = index + preDefinedItems.size
                },
                colorItem = item,
                isNew = false,
                isPremium = false,
            )
        }
    }
}

[Ori Spokoini]

Looks like a recomposition issue. Can you try using the key argument in itemsIndexed? If that doesn’t work, I’d suggest replacing PaletteItem temporarily with a simple Box to check if PaletteItem is causing the issue.

[Altynbek Nurtaza]

you probably shouldn't use the pager at all, because that leads to nested scrollable containers. just listen for 'first visible item index' for switching between tabs if you're ditching pager, or use a regular row/column if you're ditching the grid

[AmrJyniat]

Yep, I went to that way eventually, thanks for helping!