Событие прокрутки колёсика мыши в JavaScript


В JavaScript есть достаточно много событий. Однако, помимо всем известных, есть ещё событие прокрутки колёсика мыши. К сожалению, с кроссбраузерностью здесь не так всё просто, но несмотря на это, в этой статье я покажу код, который добавляет обработчик события колёсика мыши в JavaScript. Вот код JavaScript, который, во-первых, добавляет требуемое нам событие на страницу, а также демонстрирует функцию для обработки колёсика мыши. <script type="text/javascript"> // Функция для добавления обработчика событий function addHandler(object, event, handler) { if (object.addEventListener) { object.addEventListener(event, handler, false); } else if (object.attachEvent) { object.attachEvent('on' + event, handler); } else alert("Обработчик не поддерживается"); } // Добавляем обработчики для разных браузеров addHandler(window, 'DOMMouseScroll', wheel); addHandler(window, 'mousewheel', wheel); addHandler(document, 'mousewheel', wheel); // Функция, обрабатывающая событие function wheel(event) { var delta; // Направление колёсика мыши event = event || window.event; // Opera и IE работают со свойством wheelDelta if (event.wheelDelta) { // В Opera и IE delta = event.wheelDelta / 120; // В Опере значение wheelDelta такое же, но с противоположным знаком if (window.opera) delta = -delta; // Дополнительно для Opera } else if (event.detail) { // Для Gecko delta = -event.detail / 3; } // Запрещаем обработку события браузером по умолчанию if (event.preventDefault) event.preventDefault(); event.returnValue = false; alert(delta); // Выводим направление колёсика мыши } </script> Теперь, если Вы попытаетесь прокрутить колесо мыши от себя, то увидите "1" во всплывающем окне. А если на себя, то "-1". Возможно, не все из Вас знают, что такое Gecko. Gecko - это движок для многих браузеров, одним из самых популярных таких браузеров является Firefox. Вот так совсем не просто добавляется обработчик события прокрутки колеса мыши в JavaScript. Но зато этот код можно смело копировать и использовать его.