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>出现此问题是因为 CSS Scroll Snap 功能尚未完全支持双指滚动行为。您可以尝试的一种解决方法是通过将以下视口元标记添加到您的 HTML 代码来禁用移动设备上的缩放：
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<!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>