Chrome 隐藏的 CSS 滚动捕捉阈值以及如何更改它 [英] Chrome's hidden CSS scroll-snap threshold and how to change it
问题描述
我有一个容器:
scroll-snap-points-y: repeat(100%);
snap-type: mandatory;
snap-type: y mandatory;
和三个孩子:
height: 100%;
scroll-snap-align: center;
scroll-snap-stop: always;
这在 Firefox 中按预期工作，但在 Chrome 中似乎存在捕捉阈值.仅滚动少量时，Chrome 将返回到第一个子项，而 Firefox 将滚动到下一个子项.只有在滚动到子高度的 30% 左右后，Chrome 才会对齐到下一个.
This works just as expected in Firefox, but there seems to be a threshold for snapping in Chrome. When scrolling just a small amount, Chrome will snap back to the first child, while Firefox will scroll to the next child. Only after scrolling about 30% of the child height, Chrome will snap to the next one.
这种行为可以在这个代码笔中看到.
This behavior can be seen in this code pen.
有什么办法可以禁用这个隐藏的阈值并让 Chrome 立即滚动到下一个孩子?
Is there any way to disable this hidden threshold and have Chrome scroll to the next child immediately?
推荐答案
基于 Chromium Bugs 围绕 scroll-snap 的讨论，一般来说，其意图似乎是确定动量(很难用滚动，滑动稍微容易一些)但实现有点不稳定.
Based on the Chromium Bugs discussion around scroll-snap in general, it appears that the intent is to determine momentum (difficult with a scroll, slightly easier with a swipe) but the implementation is a bit wonky.
建议使用 scroll-snap-stop: always 来覆盖动量意图(您已经完成了).但是，它还提到scroll-margin 和scroll-padding 可能会影响从一个捕捉点到下一个捕捉点的移动.
The suggestion is to utilize scroll-snap-stop: always to override that momentum intent (which you've done). However, it also mentions that scroll-margin and scroll-padding may impact the movement from one snap point to the next.
您可能还想查看 Overscroll-behavior API 与 snap-scroll 结合使用.
You might also want to look at the Overscroll-behavior API in conjunction with snap-scroll.
这篇关于Chrome 隐藏的 CSS 滚动捕捉阈值以及如何更改它的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
