Страницы сайтов по своему функционалу стремятся к возможностям полноценных приложений, что, в основном, ложится на плечи 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; }

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

Источник:  internet-technologies.ru