iOS 中 CSS 仅滚动捕捉

Question

我试图在应用程序中实现 CSS only 滚动捕捉行为，但发现它在 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 页面中学到的冗余 CSS 规则，但我也尝试过没有它们，但没有成功。

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

PS：SO 中有一些讨论滚动捕捉问题的线程。其中之一结合了 JS + CSS，这并不完全是我想要做的。

Answer 1

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