CODEWITHSUNDEEP
ioscssflexboxscroll-snap-points
Simon
Simon

Reputation: 177

CSS only scroll snap in iOS

I am trying to achieve CSS only scroll-snap behaviour in an app but see that it doesn't work as expected in iOS. Here is link to CodePen that demo the case.

The code is enclosed below

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>

I included a few redundant CSS rules that I've learned in corresponding MDN page, nut I also tried without them with no luck.

I suspect that there the issue is caused because of combination of flex and scroll-snap but I'm not sure that it is the case.

PS: There are a few threads in SO discussing scroll-snap issues. One of them combines JS + CSS which is not exactly what I'm trying to do.

Upvotes: 2

Views: 3434

Answers (1)

Fabian von Ellerts
Fabian von Ellerts

Reputation: 5201

The container needs -webkit-overflow-scrolling: touch and the children overflow:visible (which they already have in your case).

Upvotes: 5

Related Questions