14

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>

4

1 回答 1

1

(编辑:这不是一个相关的答案,因为我误解了这个问题。)

我在 Firefox (v72) 中运行了您的代码片段,但没有看到您描述的行为。然后我在 Chrome (v79) 中运行它,我确实看到了有问题的行为。我正在使用 Windows 10。(顺便说一句,不错的片段。)

我可以描述它的最佳方式是,在缩放页面后,元素的滚动与其父容器不对齐。看起来它已经完成了滚动,但随后它会滚动并捕捉到不同的元素,导致它看起来像是被卡住了。

看起来这是一个特定于浏览器的错误。我的猜测是这是一个 Chrome/Blink 问题。

编辑:也许我看到的东西与你不同。我所能做的就是分享我所看到的。

火狐:
Firefox 中的平滑滚动

铬合金:
Chrome 中的 Jankier 滚动

于 2020-01-16T15:43:58.940 回答