Chrome的隐藏CSS滚动快照阈值以及如何更改阈值

Question

我有一个容器：

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才会捕捉到下一个高度。

此行为可以在此代码笔中看到。

有什么方法可以禁用此隐藏阈值并使Chrome立即滚动到下一个孩子吗？

Answer 1

基于 Chromium Bugs 的scroll-snap一般讨论，其意图似乎是确定动量（滚动很难，滑动稍微容易一些），但实现有点不稳定。

建议是利用scroll-snap-stop: always来覆盖那个动量意图（你已经完成了）。但是，它也提到了这一点，scroll-margin并且scroll-padding可能会影响从一个捕捉点到下一个捕捉点的移动。

您可能还想将Overscroll-behavior API与snap-scroll.

Answer 2

我想，您可以暂时删除scroll-snap-alignon:hover以使其进入下一个/上一个：

#carousel.snap > div:hover {
  scroll-snap-align:initial;
}