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

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;   
}