vertical scroll in viewpager jetpack compose is not working

Question

Facing issue with a vertical scroll in Horizontal View Pager using Accompanist. Can't scroll the column vertically inside HorizontalViewPager. So take a look at code and make corrections on how can fix it or any other solution. If possible will be appreciated.

                HorizontalPager(
                count = 10,
                modifier = Modifier.fillMaxSize()
            ) { page ->



                Column(
                    modifier = Modifier
                        .fillMaxWidth()
                        .fillMaxHeight(),
                ){
                    ScoreCardListItem()
                    Spacer(modifier = Modifier.height(16.dp))
                    ScoreCardListItem()
                    Spacer(modifier = Modifier.height(16.dp))
                    ScoreCardListItem()
                    Spacer(modifier = Modifier.height(16.dp))
                    ScoreCardListItem()
                    Spacer(modifier = Modifier.height(16.dp))
                    ScoreCardListItem()
                    Spacer(modifier = Modifier.height(16.dp))
                    ScoreCardListItem()
                    Spacer(modifier = Modifier.height(16.dp))
                    ScoreCardListItem()
                }
            }

can't scroll vertically while using Column. If Try to use LazyColumn It produces an error. Here is Accompanist ViewPager Link Accompanist Library

Answer 1

check using LazyColumn

           LazyColumn(
            modifier = Modifier
                .padding(16.dp)
                .fillMaxSize()
             ) {
                 item {
                    ScoreCardListItem()
                    Spacer(modifier = Modifier.height(16.dp))
                    ScoreCardListItem()
                    Spacer(modifier = Modifier.height(16.dp))
                    ScoreCardListItem()
                    Spacer(modifier = Modifier.height(16.dp))
                    ScoreCardListItem()
                    Spacer(modifier = Modifier.height(16.dp))
                    ScoreCardListItem()
                    Spacer(modifier = Modifier.height(16.dp))
                    ScoreCardListItem()
                    Spacer(modifier = Modifier.height(16.dp))
                    ScoreCardListItem()
                   }
                }

Answer 2

Another possible solution is to use the vertical scroll property of the Modifier. Like in the below code

modifier = Modifier
            .verticalScroll(rememberScrollState())