web-dev-qa-db-fra.com

Événement Mousewheel dans les navigateurs modernes

J'aimerais avoir un JavaScript propre et agréable pour l'événement mousewheel, ne prenant en charge que la dernière version des navigateurs courants sans code hérité pour les versions obsolètes, sans aucun framework JS.

L'événement Mousewheel est bien expliqué ici . Comment le simplifier pour les dernières versions actuelles des navigateurs?

Je n'ai pas accès à tous les navigateurs pour le tester, alors caniuse.com m'aide beaucoup. Hélas, la roue de souris n'y est pas mentionnée.

Sur la base du commentaire de Derek, j'ai écrit cette solution. Est-il valable pour tous les navigateurs?

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

C'est beaucoup plus propre en 2018:

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

Les navigateurs peuvent renvoyer différentes valeurs pour le delta (par exemple, Chrome renvoie +120 (faites défiler vers le haut) ou -120 (défiler vers le bas). Une bonne astuce pour le normaliser consiste à extraire son signe, en le convertissant efficacement en +1/-1:

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

Référence: MDN .

25
Lucio Paiva

Voici un article qui décrit cela et donne un exemple:

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

Code pertinent, moins l'exemple spécifique donné de redimensionnement d'une image:

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;
}
47
Almo

Cela fonctionnera dans Firefox, Chrome et Edge aussi:

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