Событие прокрутки колёсика мыши в 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. Но зато этот код можно смело копировать и использовать его.
-
Создано 10.06.2013 11:31:39
-
Михаил Русаков
Комментарии (9):
Здравствуйте, Михаил! А не могли бы Вы навести примеры где используется этот скрипт? Спасибо.
Ответить
Например, для прокрутки пользовательских полос прокрутки у блоков.
Ответить
Спасибо, понял.
Ответить
Михаил, почему вам не написать статью про все события сразу. Например как у меня на сайте?
Ответить
http://myrusakov.ru/event-javascript.html
Ответить
Так вот откуда я их столько много знаю =)
Ответить
я в javascript 0 но мне нужен скрипт для прокрутки блоков где задать какие блоки вращать?
Ответить
Прошу прощения за некропост, но вопрос горит и для профи он элементарный: Как убрать назначенное событие? removeEventListener почему-то не работает.. Я создаю функцию: function removeHandler(object, event, handler) { if (object.removeEventListener) { object.removeEventListener(event, handler, false); } // else if (object.attachEvent) { // object.attachEvent('on' + event, handler); // } else alert("Обработчик не поддерживается"); } Она вызывается по нажатию кнопки. Нажатие обрабатывается, но функция не удаляет установленное на mousewheel событие. Помогите, пожалуйста!
Ответить
Была опечатка. Всё работает. Спасибо, что предоставили площадку для общения самим с собой.))
Ответить
Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.