Событие Mousewheel в современных браузерах

Я хочу иметь чистый и приятный JavaScript для mousewheel, поддерживая только последнюю версию обычных браузеров без устаревшего кода для устаревших версий без какой-либо JS-инфраструктуры.

Событие Mousewheel хорошо объяснено здесь. Как упростить его для последних версий браузеров?

У меня нет доступа ко всем браузерам, чтобы проверить его, поэтому caniuse.com - отличная помощь для меня. Увы, колесики там не упоминаются.

Основываясь на комментарии Дерека, я написал это решение. Он действителен для всех браузеров?

someObject.addEventListener("onwheel" in document ? "wheel" : "mousewheel", function(e) {
  e.wheel = e.deltaY ? -e.deltaY : e.wheelDelta/40;
  // custom code
});

Ответы

Ответ 1

Вот статья, которая описывает это, и дает пример:

http://www.sitepoint.com/html5-javascript-mouse-wheel/

Соответствующий код, минус конкретный пример, заданный для изменения размера изображения:

var myitem = document.getElementById("myItem");
if (myitem.addEventListener)
{
    // IE9, Chrome, Safari, Opera
    myitem.addEventListener("mousewheel", MouseWheelHandler, false);
    // Firefox
    myitem.addEventListener("DOMMouseScroll", MouseWheelHandler, false);
}
// IE 6/7/8
else
{
    myitem.attachEvent("onmousewheel", MouseWheelHandler);
}

function MouseWheelHandler(e)
{
    // cross-browser wheel delta
    var e = window.event || e; // old IE support
    var delta = Math.max(-1, Math.min(1, (e.wheelDelta || -e.detail)));

    return false;
}

Ответ 2

Так будет чище в 2018 году:

window.addEventListener("wheel", event => console.info(event.deltaY));

Браузеры могут возвращать разные значения для дельты (например, Chrome возвращает +120 (прокрутка вверх) или -120 (прокрутка вниз). Хорошая уловка для нормализации - это извлечь его знак, эффективно преобразовав его в +1/-1:

window.addEventListener("wheel", event => {
    const delta = Math.sign(event.deltaY);
    console.info(delta);
});

Ссылка: MDN.

Ответ 3

Это будет работать и в Firefox, Chrome и Edge:

window.addEventListener("wheel", function(e) {
    var dir = Math.sign(e.deltaY);
    console.log(dir);
});

Ответ 4

Событие mousewheel является нестандартным и MDN рекомендует событие колеса.

var item = document.getElementById('item')
item.addEventListener('mousewheel', function(e) {
    console.log('event', e)
}, false)

Ответ 5

Попробуйте этот polyfill MDN. Это предотвращает поведение по умолчанию и создает новый addWheelListener()