Utilisation de jQuery pour vérifier la roulette de la souris de l'événement sans barre de défilement

Comment vérifier la roulette de la souris mouvement sans barre de défilement?

$(document).mousewheel(function() {
     clicker.html("a7a");
});

OriginalL'auteur saik0o | 2013-09-18

  1. 28

    Je vous recommande fortement d'utiliser ce plugin jQuery: PLUGIN

    Sans plugin, essayez cet exemple: EXEMPLE

    HTML:

    <div id='foo' style='height:300px; width:300px; background-color:red'></div>

    Javascript:

    $('#foo').bind('mousewheel', function(e) {
    if(e.originalEvent.wheelDelta / 120 > 0) {
        alert('up');
    } else {
        alert('down');
    }
});

    Il n'y a pas de barre de défilement sur la div mais la roue de l'événement est détecté.

    Il ne fonctionne pas dans FF 28
    Pourquoi divisé par 120?
    Il semble donc que wheelDelta sort soit 120 ou -120 donc la division normalise cette valeur - mais personne ne sait pourquoi le navigateur choisit 120 comme valeur?
    Je recommande l'utilisation de la 2eme argument de la fonction de gestionnaire d'événement - delta: $('#el').on('mousewheel', function(e, delta) { if(delta > 0) { /*up*/ } else { /*down*/ }}). Voir cette réponse.
    C'est vraiment travaillé. Vraiment apprécié.

    OriginalL'auteur Aaron

  2. 8

    utiliser ce code

    $('#foo').bind('mousewheel DOMMouseScroll', function (event) {           
     if (event.originalEvent.wheelDelta > 0 || event.originalEvent.detail < 0) {
          //up
     }
     else {
          //down
     }
});
    Cette réponse serait beaucoup mieux si elle comprenait davantage d'explications sur la façon dont il fonctionne, surtout qu'il est déjà un upvoted répondu présent.
    L'exemple fonctionne très bien, mais le documentation dit d'utiliser le 'wheel' de l'événement au lieu de 'mousewheel'.

    OriginalL'auteur Behnam Mohammadi

  3. 7

    Et, si vous ne voulez pas utiliser de plugin (IE8, Chrome, Firefox, Safari, Opera...), il suffit de faire ceci:

    if (document.addEventListener) {
    document.addEventListener("mousewheel", MouseWheelHandler(), false);
    document.addEventListener("DOMMouseScroll", MouseWheelHandler(), false);
} else {
    sq.attachEvent("onmousewheel", MouseWheelHandler());
}


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

        //scrolling down?
        if (delta < 0) {
            alert("Down");
        }

        //scrolling up?
        else {
             alert("Up");
        }
        return false;
    }
}

    Exemple vivant: http://jsfiddle.net/CvCc6/1/

    OriginalL'auteur Alvaro

  4. 1

    C'est juste une mise à jour de @Aaron, en réponse, à l'aide de la nouvelle "roue" de l'événement, décrit ici: https://developer.mozilla.org/en-US/docs/Web/Events/wheel

    $('#foo').on('wheel', function(e){
    if(e.originalEvent.deltaY < 0) {
        console.log('scrolling up !');
    } else{
        console.log('scrolling down !');
    }
});

    Vous pouvez également utiliser deltaX de voir de défilement horizontale, ou deltaZ si vous avez quelques fous de la 3D.

    OriginalL'auteur nHaskins