使用滚动捕捉和位置粘性进行堆栈滚动

Question

我scroll-snap结合使用position: sticky这似乎是一种优雅的方法，可以在滚动时实现堆叠卡片效果。

它在桌面上运行得非常好，但在 Safari (iOS12.1) 上我遇到了一些小故障，有时卡片会一起滚动，跳过内容。

在移动 Safari 上复制该错误的最明显方法是：

• 向下滚动到最底部的屏幕
• 关闭（模糊）并重新打开 Safari
• 然后尝试再次向上滚动

遇到的错误：它跳过所有屏幕，导致无法导航。

我想让它只使用 CSS，但我愿意提供任何（好的）解决方案。最后，它应该在 ReactJS 应用程序中工作。

演示： https: //codepen.io/theo_t/full/BbGoWq

.container {
  width: 100%;
  height: 100vh;
  overflow: scroll;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: y mandatory;
}

.item {
  position: sticky;
  position: -webkit-sticky;
  top: 0;
  scroll-snap-align: start;
  width: 100%;
  height: 100vh;   
}