2

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.

Simon
  • 158
  • 1
  • 7

1 Answers1

3

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

Fabian von Ellerts
  • 4,763
  • 40
  • 35
  • -webkit-overflow-scrolling: touch, working perfectly but removing the default scrollbar, is there any way to get that scrollbar? – Atul Rajput Dec 18 '19 at 12:26
  • @Atul No I did not find a way, this is probably the best we get. A little scroll animation or cut off shadow might help. – Fabian von Ellerts Dec 24 '19 at 14:39
  • 1
    Adding the -webkit-overflow-scrolling: touch helped me to fix scrolling in iOS/Safari 12 and lower. Thanks. – Bregt May 05 '21 at 10:51