Question

我正在尝试在应用程序中实现仅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页面中包含了一些多余的CSS规则，但我也尝试过没有它们的运气。

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

PS：SO中有一些线程讨论滚动快照问题。其中之一combines JS + CSS并非我要尝试做的。

Answer 1

容器需要-webkit-overflow-scrolling: touch和子容器overflow:visible（在您的情况下已经具备）。

CSS仅在iOS中滚动对齐

1 个答案: