Sil*_*van 14 html css multi-touch scroll-snap-points
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>Run Code Online (Sandbox Code Playgroud)
小智 0
出现此问题的原因是 CSS 滚动捕捉功能尚未完全支持两指滚动行为。您可以尝试的一种解决方法是通过将以下视口元标记添加到 HTML 代码中来禁用移动设备上的缩放:
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
Run Code Online (Sandbox Code Playgroud)
| 归档时间: |
|
| 查看次数: |
824 次 |
| 最近记录: |