Я использую 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;
}