Obtenir molette de la souris événements en jQuery?

Il y a un plugin qui détecte haut/bas de la molette souris et de la vitesse au cours d'une région.

La liaison à la fois mousewheel et DOMMouseScroll fini par travailler vraiment bien pour moi:

$(window).bind('mousewheel DOMMouseScroll', function(event){
    if (event.originalEvent.wheelDelta > 0 || event.originalEvent.detail < 0) {
        //scroll up
    }
    else {
        //scroll down
    }
});

Cette méthode est de travailler dans IE9+, Chrome 33, et Firefox 27.

---

Édition - Mars 2016

J'ai décidé de réexaminer cette question, puisque c'est un tout. Le MDN page de l'événement scroll est un excellent moyen de récupérer la position de défilement qui rend l'utilisation de requestAnimationFrame, ce qui est hautement préférable à mon précédent de la méthode de détection. J'ai modifié leur code afin de fournir une meilleure compatibilité en outre à la direction de défilement et de la position:

JS:

(function() {
  var supportOffset = window.pageYOffset !== undefined,
    lastKnownPos = 0,
    ticking = false,
    scrollDir,
    currYPos;

  function doSomething(scrollPos, scrollDir) {
    //Your code goes here...
    console.log('scroll pos: ' + scrollPos + ' | scroll dir: ' + scrollDir);
  }

  window.addEventListener('wheel', function(e) {
    currYPos = supportOffset ? window.pageYOffset : document.body.scrollTop;
    scrollDir = lastKnownPos > currYPos ? 'up' : 'down';
    lastKnownPos = currYPos;

    if (!ticking) {
      window.requestAnimationFrame(function() {
        doSomething(lastKnownPos, scrollDir);
        ticking = false;
      });
    }
    ticking = true;
  });
})();

Voir le Pen Vanilla JS de Défilement de Suivi par Jesse Dupuy (@blindside85) sur CodePen.

Ce code est actuellement en train de travailler dans Chrome v50, Firefox v44, Safari v9, and IE9+

Références:

• https://developer.mozilla.org/en-US/docs/Web/Events/scroll
• https://developer.mozilla.org/en-US/docs/Web/Events/wheel

Réponses à parler de "la roulette de la souris" événement fait référence à une déconseillé de l'événement. La norme de l'événement est tout simplement "la roue". Voir https://developer.mozilla.org/en-US/docs/Web/Reference/Events/wheel

Ici est de vanille en solution. Peut être utilisé en jQuery si l'événement s'est passé à la fonction est event.originalEvent qui jQuery met à la disposition des propriété de jQuery événement. Ou si à l'intérieur de la callback fonction vertu de nous ajouter avant la première ligne: event = event.originalEvent;.

Ce code normalise la vitesse de la roue ou de la quantité et est positif pour ce qui serait un avant de défilement dans un cadre typique de la souris, et négative vers l'arrière de la souris mouvement de la roue.

Démo: http://jsfiddle.net/BXhzD/

var wheel = document.getElementById('wheel');

function report(ammout) {
    wheel.innerHTML = 'wheel ammout: ' + ammout;
}

function callback(event) {
    var normalized;
    if (event.wheelDelta) {
        normalized = (event.wheelDelta % 120 - 0) == -0 ? event.wheelDelta / 120 : event.wheelDelta / 12;
    } else {
        var rawAmmount = event.deltaY ? event.deltaY : event.detail;
        normalized = -(rawAmmount % 3 ? rawAmmount * 10 : rawAmmount / 3);
    }
    report(normalized);
}

var event = 'onwheel' in document ? 'wheel' : 'onmousewheel' in document ? 'mousewheel' : 'DOMMouseScroll';
window.addEventListener(event, callback);

Il y a aussi un plugin pour jQuery qui est plus de commentaires dans le code, et certains de sucre supplémentaire: https://github.com/brandonaaron/jquery-mousewheel

J'étais coincé dans cette question aujourd'hui et j'ai trouvé ce code fonctionne très bien pour moi

$('#content').on('mousewheel', function(event) {
    //console.log(event.deltaX, event.deltaY, event.deltaFactor);
    if(event.deltaY > 0) {
      console.log('scroll up');
    } else {
      console.log('scroll down');
    }
});

ma combinaison qui ressemble à ça. elle s'estompe et disparaît dans chaque défiler vers le bas/vers le haut. sinon, vous devez faire défiler jusqu'à l'en-tête, pour la décoloration de l'en-tête de.

var header = $("#header");
$('#content-container').bind('mousewheel', function(e){
    if(e.originalEvent.wheelDelta > 0) {
        if (header.data('faded')) {
            header.data('faded', 0).stop(true).fadeTo(800, 1);
        }
    }
    else{
        if (!header.data('faded')) header.data('faded', 1).stop(true).fadeTo(800, 0);
    }
});

ci-dessus, on n'est pas optimisée pour le tactile/mobile, je pense que ce qu'on fait de mieux pour tous les mobiles:

var iScrollPos = 0;
var header = $("#header");
$('#content-container').scroll(function () {

    var iCurScrollPos = $(this).scrollTop();
    if (iCurScrollPos > iScrollPos) {
        if (!header.data('faded')) header.data('faded', 1).stop(true).fadeTo(800, 0);

    } else {
        //Scrolling Up
        if (header.data('faded')) {
            header.data('faded', 0).stop(true).fadeTo(800, 1);
        }
    }
    iScrollPos = iCurScrollPos;

});

Si vous utilisez mentionné jquery plugin molette de la souris, alors que penser de l'utilisation de la 2eme argument de la fonction de gestionnaire d'événement - delta:

$('#my-element').on('mousewheel', function(event, delta) {
    if(delta > 0) {
    console.log('scroll up');
    } 
    else {
    console.log('scroll down');
    }
});