---
title: "LazyLayoutScrollScope"
description: "An implementation of [LazyLayoutScrollScope] that can be used with LazyLists. Please refer to the
sample to learn how to use this API."
type: "function"
---

<div class='type'>Function</div>


<a id='references'></a>
<div class='sourceset sourceset-common'>Common</div>


```kotlin
fun LazyLayoutScrollScope(state: LazyListState, scrollScope: ScrollScope): LazyLayoutScrollScope
```


An implementation of `LazyLayoutScrollScope` that can be used with LazyLists. Please refer to the
sample to learn how to use this API.

#### Parameters

| | |
| --- | --- |
| state | The `LazyListState` associated with the layout where this custom scroll should be performed. |
| scrollScope | The base `ScrollScope` where the scroll session was created. |


#### Returns

| | |
| --- | --- |
|  | An implementation of `LazyLayoutScrollScope` that works with `LazyRow` and `LazyColumn`. |




<div class='sourceset sourceset-common'>Common</div>


```kotlin
fun LazyLayoutScrollScope(
    state: LazyStaggeredGridState,
    scrollScope: ScrollScope,
): LazyLayoutScrollScope
```


An implementation of `LazyLayoutScrollScope` that can be used with LazyStaggeredGrids.

#### Parameters

| | |
| --- | --- |
| state | The `LazyStaggeredGridState` associated with the layout where this custom scroll should be performed. |
| scrollScope | The base `ScrollScope` where the scroll session was created. |


#### Returns

| | |
| --- | --- |
|  | An implementation of `LazyLayoutScrollScope` that works with `LazyHorizontalStaggeredGrid` and `LazyVerticalStaggeredGrid`. |




<div class='sourceset sourceset-common'>Common</div>


```kotlin
fun LazyLayoutScrollScope(state: LazyGridState, scrollScope: ScrollScope): LazyLayoutScrollScope
```


An implementation of `LazyLayoutScrollScope` that can be used with LazyGrids.

#### Parameters

| | |
| --- | --- |
| state | The `LazyGridState` associated with the layout where this custom scroll should be performed. |
| scrollScope | The base `ScrollScope` where the scroll session was created. |


#### Returns

| | |
| --- | --- |
|  | An implementation of `LazyLayoutScrollScope` that works with `LazyHorizontalGrid` and `LazyVerticalGrid`. |




<div class='sourceset sourceset-common'>Common</div>


```kotlin
fun LazyLayoutScrollScope(state: PagerState, scrollScope: ScrollScope): LazyLayoutScrollScope
```


A `LazyLayoutScrollScope` that allows customization of animated scroll in `Pager`. The scope
contains information about the layout where animated scroll can be performed as well as the
necessary tools to do that respecting the scroll mutation priority.

#### Parameters

| | |
| --- | --- |
| state | The `PagerState` associated with the layout where this animated scroll should be performed. |
| scrollScope | The base `ScrollScope` where the scroll session was created. |


#### Returns

| | |
| --- | --- |
|  | An implementation of `LazyLayoutScrollScope` that works with `HorizontalPager` and `VerticalPager`. |




## Code Examples
### LazyGridCustomScrollUsingLazyLayoutScrollScopeSample
```kotlin
@Composable
@Preview
fun LazyGridCustomScrollUsingLazyLayoutScrollScopeSample() {
    suspend fun LazyGridState.customScroll(block: suspend LazyLayoutScrollScope.() -> Unit) =
        scroll {
            block.invoke(LazyLayoutScrollScope(this@customScroll, this))
        }
    val itemsList = (0..100).toList()
    val state = rememberLazyGridState()
    val scope = rememberCoroutineScope()
    Column(Modifier.verticalScroll(rememberScrollState())) {
        Button(
            onClick = {
                scope.launch {
                    state.customScroll {
                        snapToItem(40, 0) // teleport to item 40
                        val distance = calculateDistanceTo(50).toFloat()
                        var previousValue = 0f
                        androidx.compose.animation.core.animate(
                            0f,
                            distance,
                            animationSpec = tween(5_000),
                        ) { currentValue, _ ->
                            previousValue += scrollBy(currentValue - previousValue)
                        }
                    }
                }
            }
        ) {
            Text("Scroll To Item 50")
        }
        LazyHorizontalGrid(
            state = state,
            rows = GridCells.Fixed(3),
            modifier = Modifier.height(600.dp).fillMaxWidth(),
        ) {
            items(itemsList) {
                Box(Modifier.padding(2.dp).background(Color.Red).size(45.dp)) {
                    Text(it.toString())
                }
            }
        }
    }
}
```
### LazyListCustomScrollUsingLazyLayoutScrollScopeSample
```kotlin
@Composable
@Preview
fun LazyListCustomScrollUsingLazyLayoutScrollScopeSample() {
    suspend fun LazyListState.customScroll(block: suspend LazyLayoutScrollScope.() -> Unit) =
        scroll {
            block.invoke(LazyLayoutScrollScope(this@customScroll, this))
        }
    val itemsList = (0..100).toList()
    val state = rememberLazyListState()
    val scope = rememberCoroutineScope()
    Column(Modifier.verticalScroll(rememberScrollState())) {
        Button(
            onClick = {
                scope.launch {
                    state.customScroll {
                        snapToItem(40, 0) // teleport to item 40
                        val distance = calculateDistanceTo(50).toFloat()
                        var previousValue = 0f
                        androidx.compose.animation.core.animate(
                            0f,
                            distance,
                            animationSpec = tween(5_000),
                        ) { currentValue, _ ->
                            previousValue += scrollBy(currentValue - previousValue)
                        }
                    }
                }
            }
        ) {
            Text("Scroll To Item 50")
        }
        LazyRow(state = state) {
            items(itemsList) {
                Box(Modifier.padding(2.dp).background(Color.Red).size(45.dp)) {
                    Text(it.toString())
                }
            }
        }
    }
}
```
### LazyStaggeredGridCustomScrollUsingLazyLayoutScrollScopeSample
```kotlin
@Composable
@Preview
fun LazyStaggeredGridCustomScrollUsingLazyLayoutScrollScopeSample() {
    suspend fun LazyStaggeredGridState.customScroll(
        block: suspend LazyLayoutScrollScope.() -> Unit
    ) = scroll { block.invoke(LazyLayoutScrollScope(this@customScroll, this)) }
    val itemsList = (0..100).toList()
    val state = rememberLazyStaggeredGridState()
    val scope = rememberCoroutineScope()
    Column(Modifier.verticalScroll(rememberScrollState())) {
        Button(
            onClick = {
                scope.launch {
                    state.customScroll {
                        snapToItem(40, 0) // teleport to item 40
                        val distance = calculateDistanceTo(50).toFloat()
                        var previousValue = 0f
                        androidx.compose.animation.core.animate(
                            0f,
                            distance,
                            animationSpec = tween(5_000),
                        ) { currentValue, _ ->
                            previousValue += scrollBy(currentValue - previousValue)
                        }
                    }
                }
            }
        ) {
            Text("Scroll To Item 50")
        }
        LazyHorizontalStaggeredGrid(
            state = state,
            rows = StaggeredGridCells.Fixed(3),
            modifier = Modifier.height(600.dp).fillMaxWidth(),
        ) {
            items(itemsList) {
                Box(Modifier.padding(2.dp).background(Color.Red).size(45.dp)) {
                    Text(it.toString())
                }
            }
        }
    }
}
```
### PagerCustomScrollUsingLazyLayoutScrollScopeSample
```kotlin
@Preview
@Composable
fun PagerCustomScrollUsingLazyLayoutScrollScopeSample() {
    suspend fun PagerState.customScroll(block: suspend LazyLayoutScrollScope.() -> Unit) = scroll {
        block.invoke(LazyLayoutScrollScope(this@customScroll, this))
    }
    val itemsList = (0..100).toList()
    val state = rememberPagerState { itemsList.size }
    val scope = rememberCoroutineScope()
    Column(Modifier.verticalScroll(rememberScrollState())) {
        Button(
            onClick = {
                scope.launch {
                    state.customScroll {
                        snapToItem(40, 0) // teleport to item 40
                        val distance = calculateDistanceTo(50).toFloat()
                        var previousValue = 0f
                        androidx.compose.animation.core.animate(
                            0f,
                            distance,
                            animationSpec = tween(5_000),
                        ) { currentValue, _ ->
                            previousValue += scrollBy(currentValue - previousValue)
                        }
                    }
                }
            }
        ) {
            Text("Scroll To Item 50")
        }
        HorizontalPager(state) {
            Box(Modifier.padding(2.dp).background(Color.Red).height(600.dp).fillMaxWidth()) {
                Text(itemsList[it].toString())
            }
        }
    }
}
```