How can I disable the horizontal stretching/overscroll when using the `verticalScroll` modifier?

Question

I want a scrollable view which I'm doing by using the verticalScroll modifier on a column.

Column(modifier = Modifier.verticalScroll(rememberScrollState())) { 
    // ... I could provide more detail about the contents here but I don't think it matters.
}

When I start scrolling vertically, the view will allow horizontal over scroll and stretch the view horizontally. This doesn't seem like desirable behavior to me.

Is there anyway to stop this behavior from happening?

Answer 1

You can try disabling the overscroll via CompositionLocal directly scoping the Column

@OptIn(ExperimentalFoundationApi::class)
@Composable
fun MyListWithoutOverScroll() {
    CompositionLocalProvider(
        LocalOverscrollConfiguration provides null
    ) {
        Column(modifier = Modifier.verticalScroll(rememberScrollState())) {
            repeat(100) {
                Text("Hello World $it")
            }
        }
    }
}

or set it in Activity level

@Composable
fun MyList() {
    Column(modifier = Modifier.verticalScroll(rememberScrollState())) {
        repeat(100) {
            Text("Hello World $it")
        }
    }
}


@OptIn(ExperimentalFoundationApi::class)
@AndroidEntryPoint
class MyActivity : ComponentActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)

        setContent {
            CompositionLocalProvider(
                LocalOverscrollConfiguration provides null
            ) {
                MyList()
            }
        }
    }
}

Without overscroll using CompositionLocalProvider setting it to null (not-stretching)

With overscroll (stretching)