Ловим скролл

Страницы сайтов по своему функционалу стремятся к возможностям полноценных приложений, что, в основном, ложится на плечи JavaScript. Одна из задач, которая возникает у разработчика JavaScript-приложений — обработка скролла.

Пара примеров:

  • Карты Google масштабируются с помощью скролла, позволяя приближать/удалять нужный участок.
  • Страница просмотра фотографии недавно открытых Яндекс-фоток включает полоску превью (справа), которую можно крутить с помощью скролла.

Для эффективной работы со скроллом необходимо решить следующие задачи:

  • Поймать событие скролла.
  • Определить направление.
  • Заблокировать дефолтную обработку браузером — прокрутку страницы.

Для отлова скролла понадобится функция для добавления обработчика событий.

// Функция для добавления обработчика событий
function addHandler(object, event, handler, useCapture) {
 if (object.addEventListener) {
 object.addEventListener(event, handler, useCapture ? useCapture : false);
 } else if (object.attachEvent) {
 object.attachEvent('on' + event, handler);
 } else alert("Add handler is not supported");
}
// Добавляем обработчики
/* Gecko */
addHandler(window, 'DOMMouseScroll', wheel);
/* Opera */
addHandler(window, 'mousewheel', wheel);
/* IE */
addHandler(document, 'mousewheel', wheel);
// Обработчик события
function wheel(event) {
 var delta; // Направление скролла
 // -1 - скролл вниз
 // 1 - скролл вверх
 event = event || window.event;
 // Opera и IE работают со свойством wheelDelta
 if (event.wheelDelta) {
 delta = event.wheelDelta / 120;
 // В Опере значение wheelDelta такое же, но с противоположным знаком
 if (window.opera) delta = -delta;
 // В реализации Gecko получим свойство detail
 } else if (event.detail) {
 delta = -event.detail / 3;
 }
 // Запрещаем обработку события браузером по умолчанию
 if (event.preventDefault) event.preventDefault();
 event.returnValue = false;
 return delta;
}

При правильной работе будет выводиться алерт с направлением скролла без прокрутки страницы.