Question

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>

Answer 1

我在Firefox（v72）中运行了您的代码段，但没有看到您所描述的行为。然后，我在Chrome浏览器（v79）中运行了该程序，但确实看到了有问题的行为。我正在使用Windows10。（顺便说一下，很不错的代码段。）

我能描述的最好方法是缩放页面后，元素的滚动与其父容器不对齐。看起来好像已经完成滚动，但是随后滚动并捕捉到另一个元素，使它看起来像被卡住了。

这似乎是浏览器特定的错误。我的猜测是这是Chrome / Blink问题。

编辑：也许我看到的与您不同。我所能做的就是分享我所看到的。

Firefox：

Chrome浏览器：

尝试放大时，CSS滚动卡住了

1 个答案: