OGeek|极客世界-中国程序员成长平台

标题: ios - CSS 仅在 iOS 中滚动捕捉 [打印本页]

---

作者: 菜鸟教程小白    时间: 2022-12-11 22:08
标题: ios - CSS 仅在 iOS 中滚动捕捉

我正在尝试在应用中实现仅 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>

---

Best Answer-推荐答案

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

关于ios - CSS 仅在 iOS 中滚动捕捉，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/54677695/

---

欢迎光临 OGeek|极客世界-中国程序员成长平台 (http://ogeek.cn/)

Powered by Discuz! X3.4