скроллинг анимация на мобильных устройствах

[swandev]

Есть вот такой лендинг http://portfolio.alexlebedev.name/kubicom/

Там есть блок "Схема работы с нами", который должен появляться с анимацией.

Все хорошо работает на десктопах, т.е анимация происходит в тот момент когда блок появляется в зоне видимости. 

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

 

Вот как это реализовано: https://codeo.me/57V

 

Сделал пример на js.bin  http://jsbin.com/batohode/3/edit  Здесь все работает хорошо...

[Zverushka]

Хм, попробуй appear.js плагин - может с ним будет корректно?

[Yazon_Nile]

Событие onscroll срабатывает на тачустройствах и десктопах по разному.

На десктопах - во время (Т.е много раз).

На тач устройствах - только когда окошко останавливается после скролла (т.е 1 раз).

 

Чтобы сделать "одинаково" нужно или писать костыли, или юзать что-то на подобие iScroll.
 

[mishka]

$(window).height()

Это на мобилах не корректно работает. Юзай 

window.innerHeight

можно так:

var winHeight = window.innerHeight ?                function() {                    return window.innerHeight;                } :                function() {                    return document.documentElement.clientHeight;                };потом вызывать функцию winHeight()

[swandev]

Хм, попробуй appear.js плагин - может с ним будет корректно?

Не хочется тянуть целый плагин для такой цели.

 

$(window).height()

Это на мобилах не корректно работает. Юзай 

window.innerHeight

можно так:

var winHeight = window.innerHeight ?                function() {                    return window.innerHeight;                } :                function() {                    return document.documentElement.clientHeight;                };потом вызывать функцию winHeight()

 

Спасибо, то что нужно.