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.

此行为可以在此代码笔。

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

Is there any way to disable this hidden threshold and have Chrome scroll to the next child immediately?

推荐答案

基于Chromium Bug围绕 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 来覆盖这种动量意图（您已经完成）。但是，它也提到滚动边距和滚动填充可能会影响从一个捕捉点到下一个捕捉点的移动。 。

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.

来自Google的CSS快照滚动

您可能还希望查看过度滚动行为API 与快照滚动结合使用。

You might also want to look at the Overscroll-behavior API in conjunction with snap-scroll.

这篇关于Chrome的隐藏CSS滚动快照阈值以及更改方法的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！