Кроссбаузерный скроллинг

На сегодняшний день эффекты при скроллинге набрали достаточно большую популярность (так называемый параллакс ^[1]). Но, к сожалению, эти эффекты нейтивно не поддерживаются мобильными устройствами. Не так давно Mark Dalgleish предложил свой вариант решения этой проблемы:

Библиотеки

Выбираем одну из тач-библиотек:
iScroll by Matteo Spinelli ^[2]
Scrollability by Joe Hewitt ^[3]
Zynga Scroller by Zynga ^[4]

И подключаем Modernizr ^[5]

Обертка

Если ваш выбор пал на iScroll, вам следует поместить контент внутри блоков #wrapper и #scroller

<div id="wrapper">
    <div id="scroller">
        <ul>
            <li>...</li>
        </ul>
    </div>
</div>

Определяем тач-устройство с помощью Modernizr и создаем для него новый экземпляр iScroll

var myScroller = Modernizr.touch ? new iScroll('scroller') : null;

Добавляем стили

#wrapper {
   overflow: auto;
}
/* Переопределяем #wrapper для тач-устройств */
/* Класс head.touch создается Modernizer'ом в случаи если ваш браузер поддерживает тач-ивенты */
.touch #wrapper {
   overflow: hidden;
}

Функция для нормализации позиции скрола

function getScroll(elem, iscroll) {
  var x, y;
  if (Modernizr.touch && iscroll) {
    x = iscroll.x * -1;
    y = iscroll.y * -1;
  } else {
    x = elem.scrollTop;
    y = elem.scrollLeft;
  }
  return {x: x, y: y};
}

Финальный штрих

var myScroller = Modernizr.touch ? new iScroll('scroller') : null;
(function animationLoop(){
    window.requestAnimationFrame(animationLoop);

    var scroll = getScroll(window, myScroller);

    // Теперь мы можем использовать кроссплатформенные координаты
    scroll.x;
    scroll.y;
})();

Почему для анимации следует использовать requestAnimationFrame ^[6]

Автор: vermilion1