Снимок прокрутки только CSS в iOS - PullRequest
Новая
       27

Снимок прокрутки только CSS в iOS

0 голосов
/ 13 февраля 2019

Я пытаюсь добиться только 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>

Я включил несколько избыточных правил CSS, которые я выучил на соответствующей странице MDN, но я также попытался без них без удачи.

Я подозреваю, что там проблема вызвана комбинацией flex и scroll-snap, но я не уверен, что это так.

PS: В SO есть несколько потоков, обсуждающих scroll-мгновенные проблемы.Один из них сочетает в себе JS + CSS , что не совсем то, что я пытаюсь сделать.

...