Функционал сайтов зачастую похож на функционал полноценных приложений. Одна из задач, которая возникает при этом — обработка скролла в JavaScript.
Необходимо решить следующие задачи:
1. Поймать событие скролла.
2. Определить направление.
3. Заблокировать дефолтную обработку браузером — прокрутку страницы.
Функция для добавления обработчика событий.
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;
}
