当您尝试放大时,CSS 滚动捕捉卡住

Sil*_*van 14 html css multi-touch scroll-snap-points

CSS-scroll-snap运行良好。但是,当您用一根手指在移动设备上滚动时,将这根手指保持在屏幕上并用另一根手指向相反方向滚动(例如缩放?),然后滚动快照会卡住。(无论在哪个浏览器上)

当您在滚动时按住 Ctrl 键时,它甚至可以在桌面上运行。

我不知道这是否是一个常见问题,但我找不到针对此问题的任何修复程序或变通方法。

有什么建议?

自己试试:

<!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>
Run Code Online (Sandbox Code Playgroud)

小智 0

出现此问题的原因是 CSS 滚动捕捉功能尚未完全支持两指滚动行为。您可以尝试的一种解决方法是通过将以下视口元标记添加到 HTML 代码中来禁用移动设备上的缩放:

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
Run Code Online (Sandbox Code Playgroud)