当您尝试放大时，CSS 滚动捕捉卡住
Posted
技术标签:
【中文标题】当您尝试放大时，CSS 滚动捕捉卡住【英文标题】：CSS scroll snapping stucks when you try to zoom in 【发布时间】：2019-07-20 23:00:24 【问题描述】：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>【问题讨论】：
不要让它占据整个屏幕的宽度。 @kish Wdym？它甚至不是整个屏幕的宽度。 您可以使用 javascript 来解决问题吗？还是只能是 css？ @Sirence 尽可能只使用 css。 【参考方案1】：（编辑：这不是一个相关的答案，因为我误解了这个问题。）
我在 Firefox (v72) 中运行了您的代码 sn-p 并没有看到您所描述的行为。然后我在 Chrome (v79) 中运行它，我确实看到了有问题的行为。我使用的是 Windows 10。（顺便说一句，不错的 sn-p。）
我能描述它的最好方式是，在缩放页面后，元素的滚动与其父容器不对齐。看起来它已经完成了滚动，但随后它会滚动并捕捉到不同的元素，导致它看起来像是被卡住了。
这似乎是一个特定于浏览器的错误。我猜这是 Chrome/Blink 的问题。
编辑：也许我看到的东西与你不同。我所能做的就是分享我所看到的。
火狐：
铬：
【讨论】：
我可以在 Firefox 72.0.1 上重现该错误 我可以在 Firefox 69、Firefox 72 和 Chrome 66 以来的最低版本中重现该错误。也在最新的 Opera 版本 67.0.3564.0 中 当您在滚动时按下 Ctrl 键然后停止滚动（缩放），这些框会一直停留在它们所在的位置，直到您再次正常滚动。然后它会自行修复（在每个缩放步骤中）。 哦，我明白了。我误解了bug的步骤。现在我正在尝试同样的事情，我看到了同样的行为。很有意思。我正在考虑删除我的答案。以上是关于当您尝试放大时，CSS 滚动捕捉卡住的主要内容，如果未能解决你的问题，请参考以下文章
CollapsingToolbarLayout正在滚动并卡住