Итак, я создал сайт, используя идею Keal Clark pure CSS parallax. И это выглядит хорошо, но мне любопытно, если кто-то выяснил , как разрешить прокрутку инерции/импульса на iOS.
То, что я знаю до сих пор:
Инерционная/импульсная прокрутка не работает, потому что по существу вся страница хранится в контейнере с overflow-y:auto. Поэтому, когда вы прокручиваете страницу, вы прокручиваете контейнер.
На iOS вы должны применить -webkit-overflow-scrolling: touch, чтобы разрешить прокрутку, которая не является видовым окном, для прокрутки инерции/импульса.
Если вы добавите -webkit-overflow-scrolling: touch в .parallax, тогда весь эффект параллакса сломается.
пример этого здесь
Я попробовал добавить iscroll.js на страницу, но также разбивает страницу, заставляя детей в контейнере .parallax прокручиваться так, как это неправильно. Это делает слои параллакса движущимися вверх и вниз относительно окна просмотра, а не контейнера.
Другая проблема, которая вызывает эту проблему, не такая большая сделка, но было бы неплохо обратиться сюда, поскольку она связана с тем, что на iOS страница никогда не будет входить в минимальную -у, поскольку это происходит только при прокрутке видовой области.
Я видел, как люди спрашивали об этом в сообщении в блоге, поэтому я решил, что могу привести те же проблемы к stackoverflow и посмотреть, есть ли у кого-нибудь хорошие идеи.
Спасибо!
Не то, что вы хотите услышать (предполагая, что вы положили несколько хороших часов, просматривая руководство Keith Clark), но iOS обрабатывает прокрутки событий иначе, чем рабочий стол. Возможно, вы можете настроить то, что у вас уже есть, но если вы действительно этого хотите, вам, вероятно, лучше перейти на инструмент js с документированной поддержкой параллакса iOS + импульс. Stellar может это сделать, например - http://markdalgleish.com/projects/stellar.js/docs/
Сначала я был очень взволнован этим новым способом параллакса, но очень разочарован, когда обнаружил эту проблему.
На андроиде работает нормально.
Кажется, это только iOS.