CSS 仅在 iOS 中滚动捕捉

Posted 2023-03-05

【中文标题】CSS 仅在 iOS 中滚动捕捉

【英文标题】：CSS only scroll snap in 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 并不是我想要做的。

【参考方案1】：

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

【讨论】：

-webkit-overflow-scrolling：触摸，工作正常但删除默认滚动条，有没有办法得到那个滚动条？

@Atul 不，我没有找到方法，这可能是我们得到的最好的方法。一点滚动动画或切断阴影可能会有所帮助。

添加 -webkit-overflow-scrolling: touch 帮助我修复了 ios/Safari 12 及更低版本中的滚动问题。谢谢。