Current scroll position value in pixels in LazyColumn Jetpack Compose

Question

I want to have the total scroll position in px in LazyColumn. The column itself has a ScrollState which has a value (Described in the document as the current scroll position value in pixels), But LazyColumn ScrollState hasn't this field, I want the exact equivalent of Column ScrollState scroll position value for LazyColumn, How I can achieve that with the help of LazyScrollState?

Answer 1

The reason it exists in Column is because it knows about all the items (rows) when it's being generated.

But LazyColumn only displays a portion of the total views at any given moment, and when you scroll, it continuously re-generates the views on the screen (plus a couple above and/or below the visible area), so it never actually calculates the total height of all the rows. If you wanted to get the scroll position, you would have to manually calculate it. If the height of each row is the same, it'll work pretty well. But if the heights are different, then you won't be able to get the exact scroll position (your calculations will fluctuate depending on the height of the rows that are currently displayed). But here's what you have to do to calculate it yourself:

Calculate the total size of all the items

val totalItems = lazyListState.layoutInfo.totalItemsCount
val itemLengthInPx = lazyListState.layoutInfo.visibleItemsInfo.firstOrNull()?.size ?: 0
val totalLengthInPx = totalItems * itemLengthInPx 

Calculate the current scroll position

val scrollPos = (lazyListState.firstVisibleItemIndex * itemLengthInPx) / totalLengthInPx

But as I mentioned earlier, this calculation depends on the height of each item ( itemLengthInPx ), and it works perfectly if it's the same for all the views. But you can see how it'll fluctuate if each view has a different height

Answer 2

The scroll amount can be obtained, no calculation required, in the items themselves, by attaching an onGloballyPosition{ it.positionInParent()} modifier to one or more items.

Then, the items can do what they need to do with their own scroll position, such as offsetting some screen-drawing y coordinate.

Or, if you need the scroll offset in the parent LazyColumn, you could have one item (perhaps an item with zero height, though I've not tested that) at the very top of your list of items, that reports back its position to the parent (perhaps by updating a mutableState that was passed to the item by the parent) whenever it moves.

I had the same need and onGloballyPosition{ it.positionInParent()} addressed it very nicely.

Answer 3

You can get it by firstVisibleItemScrollOffset .
('androidx.activity:activity-compose:1.3.1')

val listState = rememberLazyListState()
val itemHeight = with(LocalDensity.current) { 80.dp.toPx() } // Your item height
val scrollPos = listState.firstVisibleItemIndex * itemHeight + listState.firstVisibleItemScrollOffset

Text(text = "scroll: $scrollPos")

LazyColumn(state = listState) {
    // Your items here
}

Also, you can set the scroll position to listState , like this:

LaunchedEffect(key1 = "Key") {
    delay(1000) // To show scroll explicitly, set the delay
    listState.scrollBy(itemHeight * 2)
}