Блог

Я использую scroll-snap в сочетании с position: sticky , которые показались элегантным подходом для включения эффекта стекирования карт во время прокрутки.

Это довольно отлично работает на рабочем столе, но в Safari (iOS12.1) я испытываю сбои, когда иногда карточки прокручиваются все вместе, пропуская содержимое.

Наиболее очевидный способ повторить ошибку в мобильном Safari — это:

• прокрутите вниз до самого нижнего экрана
• закройте (размытие) и снова откройте Safari
• затем попытка прокрутки назад снова

Обнаружена ошибка: она пропускает все экраны, делая навигацию невозможной.

Я бы хотел, чтобы это работало только с CSS, но я был бы за любое (хорошее) решение. В конце концов, это предназначено для работы в приложении ReactJS.

Демонстрация: https://codepen.io/theo_t/full/BbGoWq

 .container {
  width: 100%;
  height: 100vh;
  overflow: scroll;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: y mandatory;
}

.item {
  position: sticky;
  position: -webkit-sticky;
  top: 0;
  scroll-snap-align: start;
  width: 100%;
  height: 100vh;   
}