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