2

我正在尝试在应用程序中实现仅 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中有一些讨论滚动快照问题的线程。其中之一结合了 JS + CSS，这并不是我想要做的。

4

1 回答 1

2

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

于 2019-09-13T15:48:33.597 回答