Подтвердить что ты не робот

Keith Clark CSS Параллакс Инерциальный/Моментный прокрутка на мобильном телефоне

Итак, я создал сайт, используя идею Keal Clark pure CSS parallax. И это выглядит хорошо, но мне любопытно, если кто-то выяснил , как разрешить прокрутку инерции/импульса на iOS.

Вот мой сайт.

То, что я знаю до сих пор:

Инерционная/импульсная прокрутка не работает, потому что по существу вся страница хранится в контейнере с overflow-y:auto. Поэтому, когда вы прокручиваете страницу, вы прокручиваете контейнер. На iOS вы должны применить -webkit-overflow-scrolling: touch, чтобы разрешить прокрутку, которая не является видовым окном, для прокрутки инерции/импульса.

Если вы добавите -webkit-overflow-scrolling: touch в .parallax, тогда весь эффект параллакса сломается. пример этого здесь

Я попробовал добавить iscroll.js на страницу, но также разбивает страницу, заставляя детей в контейнере .parallax прокручиваться так, как это неправильно. Это делает слои параллакса движущимися вверх и вниз относительно окна просмотра, а не контейнера.

Другая проблема, которая вызывает эту проблему, не такая большая сделка, но было бы неплохо обратиться сюда, поскольку она связана с тем, что на iOS страница никогда не будет входить в минимальную -у, поскольку это происходит только при прокрутке видовой области.

Я видел, как люди спрашивали об этом в сообщении в блоге, поэтому я решил, что могу привести те же проблемы к stackoverflow и посмотреть, есть ли у кого-нибудь хорошие идеи.

Спасибо!

4b9b3361

Ответ 1

Не то, что вы хотите услышать (предполагая, что вы положили несколько хороших часов, просматривая руководство Keith Clark), но iOS обрабатывает прокрутки событий иначе, чем рабочий стол. Возможно, вы можете настроить то, что у вас уже есть, но если вы действительно этого хотите, вам, вероятно, лучше перейти на инструмент js с документированной поддержкой параллакса iOS + импульс. Stellar может это сделать, например - http://markdalgleish.com/projects/stellar.js/docs/

Ответ 2

Сначала я был очень взволнован этим новым способом параллакса, но очень разочарован, когда обнаружил эту проблему.

На андроиде работает нормально.

Кажется, это только iOS.