css - Chrome 的隐藏 CSS 滚动捕捉阈值以及如何更改它

Question

我有一个容器:

scroll-snap-points-y: repeat(100%);
snap-type: mandatory;
snap-type: y mandatory;

和三个 child :

height: 100%;
scroll-snap-align: center;
scroll-snap-stop: always;

这在 Firefox 中按预期工作，但在 Chrome 中似乎存在捕捉阈值。当滚动少量时，Chrome 会快速回到第一个 child ，而 Firefox 会滚动到下一个 child 。只有在滚动大约 30% 的子高度后，Chrome 才会捕捉到下一个。

此行为可以在 this code pen 中看到.

有什么方法可以禁用这个隐藏的阈值并让 Chrome 立即滚动到下一个 child 吗？

Answer 1

根据 Chromium Bugs 对 scroll-snap 的一般讨论，其目的似乎是确定动量(滚动困难，滑动稍微容易一些)但实现有点不稳定。

建议是利用 scroll-snap-stop: always 来覆盖动量意图(您已完成)。但是，它也提到 scroll-margin 和 scroll-padding 可能会影响从一个捕捉点到下一个捕捉点的移动。

CSS Snap Scrolling from Chrome Dev

您可能还想查看 Overscroll-behavior API结合 snap-scroll。