小编Sim*_*mon的帖子

iOS 中 CSS 仅滚动捕捉

我试图在应用程序中实现 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;
} …
Run Code Online (Sandbox Code Playgroud)

css ios flexbox scroll-snap-points

2
推荐指数
1
解决办法
3263
查看次数

标签 统计

css ×1

flexbox ×1

ios ×1

scroll-snap-points ×1