CSS 仅在 iOS 中滚动捕捉答案

【问题标题】：CSS only scroll snap in iOSCSS 仅在 iOS 中滚动捕捉
【发布时间】：2019-07-07 17:30:52
【问题描述】：

我正在尝试在应用中实现仅 CSS 的滚动捕捉行为，但发现 它在 iOS 中无法按预期工作。这是演示案例的CodePen 的链接。

代码如下

body, html {
  height: 100%;
  margin: 0;
}
body {
  display: flex;
  justify-content: center;
  align-items: center;
}
.panel-container {
  width: 100%;
  height: 50%;
  border: 2px solid lightgray;
  box-sizing: content-box;
  display: flex;
  overflow-x: scroll;
  scroll-snap-type: x mandatory;
  scroll-snap-type: mandatory;
  scroll-snap-points-x: repeat(100%);
  scroll-snap-destination: 0 0;
}
.panel {
  scroll-snap-align: start;
  border: 2px solid;
  box-sizing: border-box;
  min-width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.one {
  border-color: red;
}
.two {
  border-color: blue;
}

<div class="panel-container">
  <div class="panel one">
    One
  </div>
  <div class="panel two">
    Two
  </div>
</div>

我在相应的 MDN 页面中包含了一些我在相应的 MDN 页面中学到的多余的 CSS 规则，但是我也尝试过没有它们，但没有运气。

我怀疑问题是由于flex 和scroll-snap 的组合引起的，但我不确定是否是这种情况。

PS：SO 中有一些讨论滚动快照问题的线程。其中一个combines JS + CSS 并不是我想要做的。

【问题讨论】：

标签： ios css flexbox scroll-snap-points

【解决方案1】：

容器需要-webkit-overflow-scrolling: touch 和孩子overflow:visible（在你的情况下他们已经有了）。

【讨论】：

-webkit-overflow-scrolling：触摸，工作正常但删除默认滚动条，有没有办法得到那个滚动条？
@Atul 不，我没有找到方法，这可能是我们得到的最好的方法。一点滚动动画或切断阴影可能会有所帮助。
添加 -webkit-overflow-scrolling: touch 帮助我修复了 iOS/Safari 12 及更低版本中的滚动问题。谢谢。