使用滚动进行transform：translateY，顶部对齐

Question

我正在尝试实现一个具有自定义滚动效果的页面，其中各部分的上移部分与上一个通过transform transformY进行的重叠。

我的所有部分都在该页面的底部，如该图像（https://i.stack.imgur.com/kYH0I.png）所示，垂直差为8像素。

当用户滚动页面（其高度等于所有部分的高度减去其各自的8个像素的距离）时，这些部分将上升并捕捉在页面顶部，再次保留这8个像素。

我在滚动事件中执行此操作，因此我可以使用 window.pageYOffset 获取滚动条的位置，并相应地移动该部分。

使用诸如触控板或Mac鼠标的平滑滚动时会出现问题。我在这里写我的代码：

if (currentScrollValue <= topSnapPoint {
    section.style.transform = `translateY(${currentScrollValue})`
} else {
    section.style.transform = `translateY(${topSnapPoint})`
}

虽然滚动条位于捕捉点下方，但一切正常，但是如果快速滚动，当前滚动值会大于捕捉点，并且该部分将从最后一个状态跳转到捕捉点。

我尝试将过渡设置为0.1s，以便此跳转很平稳，但是在滚动时会产生非常微妙的滞后。我还尝试了几个滚动插件，例如iScroll.js（我看到您可以为滚动设置一个限制，正是我想要的），但是由于我必须滚动一个尚不可见的部分，所以我想到了我自己比调整它要容易。

即使用户快速滚动，我仍需要该部分继续滚动直到到达顶部。最好为translateY设置一个限制（或多或少类似于max-height的作品），但这似乎是不可能的。

如果您需要更多信息，或者我还没有清楚自己的意思，请告诉我。

任何帮助将不胜感激。谢谢！