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>