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

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

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


В javascript есть достаточно много событий. Однако, помимо всем известных, есть ещё событие прокрутки колёсика мыши. К сожалению, с кроссбраузерностью здесь не так всё просто, но несмотря на это, в этой статье я покажу код, который добавляет обработчик события колёсика мыши в javascript.

Вот код 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); // Выводим направление колёсика мыши
}


Теперь, если Вы попытаетесь прокрутить колесо мыши от себя, то увидите "1" во всплывающем окне. А если на себя, то "-1".

Возможно, не все из Вас знают, что такое Gecko. Gecko - это движок для многих браузеров, одним из самых популярных таких браузеров является Firefox.

Вот так совсем не просто добавляется обработчик события прокрутки колеса мыши в javascript. Но зато этот код можно смело копировать и использовать его.


Скачивание доступно только для зарегистрированных
НАШИ НОВОСТИ
Опубликовано 04 апрель 2014
Представляю вашему вниманию шаблон онлайн кинотеатра с глубокой настройкой под свои нужны OST-ARENA.RU Читать далее...
Опубликовано 18 март 2014
Представляю вашему вниманию, адаптивный новостной шаблон Reades News. Адаптивный дизайн подразумевает, что шаблон будет одинаково корректно отображаться во всех устройствах. Шаблон отлично подойдет для медийных новостей и не только. Обязательно посмотрите видеозапись работы Читать далее...
Опубликовано 16 март 2014
Дизайн Zerotheme, адаптирован для DLE 10.1 by Yurets. Шаблон zBoomMusic позиционируется как шаблон для музыкального портала или музыкального блога. Вверху шаблона расположен слайдер, под слайдером Топ новостей, далее последние добавленные новости. Читать далее...