CSS scroll snapping stucks when you try to zoom in

Asked 27/2, 2019 at 9:15 Answered 19/3, 2023 at 6:13

CSS-scroll-snap is working very well. But when you scroll on mobile with one finger, than hold this finger still on the screen and scroll with another finger in the opposite direction (like a zoom ↕), then the scroll-snap will stuck. (regardless on which browser)

It even works on Desktop when you hold Ctrl while scrolling.

I don't know if this is a common issue, but I can't find any fixes or work arounds for this problem.

Any suggestions?

Try it on yourself:

<!DOCTYPE html>
    <html lang="en" dir="ltr">
        <head>
            <meta charset="utf-8">
            <meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' />
            <title></title>
            <style media="screen">
                .container{
                    scroll-snap-type: y mandatory;
                    height: 50vh;
                    width: 50%;
                    overflow-y: scroll;
                }

                .content {
                    scroll-snap-align: center;
                    height: 50vh;
                    width: 100%;
                }
            </style>
        </head>
        <body>
            <div class="container">
                <div class="content" style="background:blue;">
                    1
                </div>
                <div class="content" style="background:red;">
                    2
                </div>
                <div class="content" style="background:green;">
                    3
                </div>
                <div class="content" style="background:orange;">
                    4
                </div>
            </div>
        </body>
    </html>

Trainbearer answered 27/2, 2019 at 9:15 Comment(4)

don't make it the full width of the screen. – Albatross 27/2, 2019 at 12:22

@Albatross Wdym? It's not even full width of the screen. – Trainbearer 27/2, 2019 at 13:6

Could you use javascript for a workaround? Or does it have to be css only? – Putout 16/1, 2020 at 15:45

@Sirence Only css when possible. – Trainbearer 16/1, 2020 at 15:50

This issue occurs because the two-finger scroll behavior is not yet fully supported by the CSS Scroll Snap feature. One workaround you could try is to disable zoom on mobile devices, by adding the following viewport meta tag to your HTML code:

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

Trilogy answered 2/2, 2023 at 16:34 Comment(0)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-16">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
</head>
<body>
    <style media="screen">
        .container {
            scroll-snap-type: y mandatory;
            height: 50vh;
            width: 50%;
            overflow-y: scroll;
        }

        .content {
            scroll-snap-align: bottom;
            height: 50vh;
            width: 100%;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="content" style="background:blue;">
            1
        </div>
        <div class="content" style="background:red;">
            2
        </div>
        <div class="content" style="background:green;">
            3
        </div>
        <div class="content" style="background:orange;">
            4
        </div>
    </div>
</body>

</html>

Toscanini answered 19/3, 2023 at 6:13 Comment(1)

I hope this solved your problem, otherwise use animation or media querry for better results. Thank You. – Toscanini 19/3, 2023 at 6:15

Recommended topics

Hot tags