Почему не работает параллакс в смартфоне?

Question

[ligisayan]

Всем привет! У меня почему-то не работает параллакс в мобильном телефоне. Смартфон на Android 4.3, браузер google chrome обновленный, напротив javascript стоит галка разрешен, разрешение экрана 335 на 667. Причем на стационарном компьютере при различных экранных разрешениях и в онлайн сервисах все отлично отрабатывает!
Попытался воспроизвести пример в фидле здесь
фактически за образец брал отсюда

Answer 1

[Дмитрий Королёв]

Параллакс на мобильных устройствах не работает, потому что скроллинг там работает не так, как на десктопе. На айфонах/айпадах, к примеру, событие scroll по факту отрабатывает только в момент завершения прокрутки страницы, а не в течение всей этой прокрутки. На андроидах, если мне не изменяет память, тоже примерно так.

Comments

[ligisayan]

Дмитрий Королёв а если вопрос по другому поставить: можно ли реализовать эмуляцию параллакс скролла на мобильных девайсах - есть же например библиотечка matthew.wagerfield.com/parallax

[Дмитрий Королёв]

ligisayan: для того, чтобы работал параллакс-эффект в любом его виде, нужно, чтобы постоянно поступали какие-то изменяющиеся данные, на основе которых можно было бы вычислять изменение положения элементов. Скрипт, который вы привели в пример, получает эти данные от датчиков положения устройства. Но со скроллом так не выйдет по описанным выше причинам.
Впрочем, выход, в какой-то степени, есть. Например, эта библиотека - https://github.com/Prinzhorn/skrollr - на мобильных устройствах вообще убирает скролл и заменяет его обработкой тач-евентов. Однако, дальнейшее развитие этой библиотеки прекращено, и я полностью согласен с её авторов в причинах этого: "To be honest, mobile support always sucked (because mobile browsers are hard) and you shouldn't compromise UX for some fancy UI effects. Ever."

Answer 2

[sumanai]

Он там и не нужен. К чему грузить бедные телефоны с ограниченным зарядом батареи и трафикм вашими свистелками?

Comments

[ligisayan]

sumanai ну это вы явно преувеличиваете и прошлым веком живете - не начало 2000ых ведь)) будущее уже ярко очерчено: за за гламуром, красивостями и эффектами даже на часах,)

[sumanai]

На дворе 2015, а мой телефон работает сутки. В 2000 телефон работал неделю.

Answer 3

[ndbn]

Откройте страницу в декстопном Chrome, откройте режим разработчика, включите имитацию экрана смартфона(значок смартфона) и увидите 2 скроллбара, дело, видимо, в том, что прокручивается не тот, который нужно, т.ч. от одного нужно избавится.

Comments

[ligisayan]

ndbn а где вы обнаружили 2 скроллбара? у меня 1 показыват. можете скрин выслать?

[ndbn]

ligisayan: oi60.tinypic.com/28cq3rb.jpg если двигать внутренний, параллакс наблюдается.

[ligisayan]

ndbn: к сожалению, в упор не вижу 2ой скролл s019.radikal.ru/i619/1509/05/c260cfca6533.png
или я что-то не так делаю?

[ndbn]

ligisayan: Вот эту ссылку откройте https://jsfiddle.net/tkugth6w/3/embedded/result/

[ligisayan]

ndbn: спасибо за помощь, но свойство #tabs { overflow-y: hidden; } не дает нужного эффекта.. наверное, параллакс нельзя адаптировать к мобильной версии