提问人：Silvan 提问时间：2/27/2019 最后编辑：MezianeSilvan 更新时间：7/9/2023 访问量：1404
CSS 滚动捕捉卡住时尝试放大
CSS scroll snapping stucks when you try to zoom in
问：
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>答：
0赞
Talal khawaja
2/3/2023
#1
出现此问题的原因是 CSS 滚动捕捉功能尚不完全支持双指滚动行为。您可以尝试的一种解决方法是在移动设备上禁用缩放，方法是将以下视口 meta 标记添加到您的 HTML 代码中：
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
0赞
Akash Kobal
3/19/2023
#2
<!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>
评论
0赞
Akash Kobal
3/19/2023
我希望这能解决您的问题，否则使用动画或媒体查询以获得更好的结果。谢谢。
评论