Почему событие scroll работает по разному на разных устройствах?

Question

[nepster-web]

Есть задача сделать следующее:
Прилипающая шапка, прилипающий блок слева и справа. Таким образом, что все всегда статично кроме центрального блока.

Выглядит это так:


Я не использовал position fixed, так как если появляется горизонтальный скрол, получается не хорошие ситуации.
В место этого был использован следующих способ:

var targetClassifierElemet = $('.classifier-block');
var targetSalesElemet = $('.sales');

targetClassifierElemet.css('top',+$(window).scrollTop());
targetSalesElemet.css('top',+$(window).scrollTop());

$(window).scroll(function(){
    targetClassifierElemet.css('top',+$(window).scrollTop());
    targetSalesElemet.css('top',+$(window).scrollTop());
});

Проблемы возникают тут:
На всех мобильных устройствах и сафари под маком, блоки не стот статично как в остальных браузерах, а доплывают. Тоесть очень мерзго дергаются, такое ощущение что scroll срабатывает 1 раз в самом конце.

Подскажите пожалуйста как это можно исправить?

Answer 1

[Антон]

1. Проблема с горизонтальным скроллингом fixed-блока решается так:

$(window).on('scroll', function(){
   $('.fixed-block').css('margin-left', - $(window).scrollLeft());
});

2. На мобильных устройствах событие скролл не срабатывает, пока не прекратится текущая анимация. Сделано это скорее всего из соображений оптимизации и экономии батарейки.

Comments

[nepster-web]

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

[Антон]

nepster09: о каких проблемах с горизонтальным скроллом вы говорите?

[nepster-web]

Антон: С мобильных устройств при прокрутке например в право блок ездит и возвращается на место только тогда когда закончится анимация прокрутки. Это очень топорный косяк.