Obtenir des événements de roue de souris en jQuery?

​$(document).ready(function(){
    $('#foo').bind('mousewheel', function(e){
        if(e.originalEvent.wheelDelta /120 > 0) {
            console.log('scrolling up !');
        }
        else{
            console.log('scrolling down !');
        }
    });
});

liant à la fois mousewheel et DOMMouseScroll a fini par fonctionner 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 fonctionne dans IE9+, Chrome 33, et Firefox 27.

Edit-Mars 2016

j'ai décidé de revenir sur cette question depuis longtemps. La page MDN pour l'événement de défilement a une grande façon de récupérer la position de défilement qui fait usage de requestAnimationFrame , ce qui est hautement préférable à ma méthode de détection précédente. J'ai modifié leur code afin de fournir une meilleure compatibilité en outre à la direction de défilement et de la position:

(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;
  });
})();

ce code fonctionne actuellement dans Chrome v50, Firefox v44, Safari v9, and IE9+

, les Références:

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

les réponses parlant de l'événement" mousewheel " font référence à un événement déprécié. L'événement standard est simplement "la roue". Voir https://developer.mozilla.org/en-US/docs/Web/Reference/Events/wheel

à partir de maintenant en 2017, vous pouvez juste écrire

$(window).on('wheel', function(event){

  // deltaY obviously records vertical scroll, deltaX and deltaZ exist too
  if(event.originalEvent.deltaY < 0){
    // wheeled up
  }
  else {
    // wheeled down
  }
});

fonctionne avec Firefox 51, Chrome 56, IE9+

cela a fonctionné pour moi:)

 //Firefox
 $('#elem').bind('DOMMouseScroll', function(e){
     if(e.originalEvent.detail > 0) {
         //scroll down
         console.log('Down');
     }else {
         //scroll up
         console.log('Up');
     }

     //prevent page fom scrolling
     return false;
 });

 //IE, Opera, Safari
 $('#elem').bind('mousewheel', function(e){
     if(e.originalEvent.wheelDelta < 0) {
         //scroll down
         console.log('Down');
     }else {
         //scroll up
         console.log('Up');
     }

     //prevent page fom scrolling
     return false;
 });

de stackoverflow

Voici une solution à la vanille. Peut être utilisé dans jQuery si l'événement passé à la fonction est event.originalEvent que jQuery met à disposition en tant que propriété de l'événement jQuery. Ou si à l'intérieur de la fonction callback nous ajoutons avant la première ligne: event = event.originalEvent; .

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

: 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 verbeux dans le code et un peu de sucre supplémentaire: https://github.com/brandonaaron/jquery-mousewheel

cela fonctionne dans les dernières versions de chaque IE, Firefox et Chrome.

$(document).ready(function(){
        $('#whole').bind('DOMMouseScroll mousewheel', function(e){
            if(e.originalEvent.wheelDelta > 0 || e.originalEvent.detail < 0) {
                alert("up");
            }
            else{
                alert("down");
            }
        });
    });

j'étais coincé dans ce numéro 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');
    }
});

utilisez ce code

 knob.bind('mousewheel', function(e){  
 if(e.originalEvent.wheelDelta < 0) {
    moveKnob('down');
  } else {
    moveKnob('up');
 }
  return false;
});

ma combinaison ressemble à ça. elle s'efface et s'efface sur chaque rouleau. sinon, vous devez faire défiler jusqu'à l'en-tête, pour la décoloration de l'en-tête.

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);
    }
});

celui ci-dessus n'est pas optimisé pour touch / mobile, je pense que celui-ci le fait mieux pour tout mobile:

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;

});

le plugin que @DarinDimitrov a posté, jquery-mousewheel , est cassé avec jQuery 3+ . Il serait préférable d'utiliser jquery-wheel qui fonctionne avec jQuery 3+.

si vous ne voulez pas suivre la route de jQuery, MDN met fortement en garde en utilisant le mousewheel événement comme il est non standard et non supporté dans de nombreux endroits. Il dit plutôt que vous devriez utiliser l'événement wheel comme vous obtenez beaucoup plus de spécificité sur exactement ce que les valeurs que vous obtenez signifie. Il est pris en charge par la plupart des principaux navigateurs.

si l'utilisation mentionnée jQuery mousewheel plugin , alors que faire pour utiliser le 2ème argument de la fonction de handler d'événement - delta :

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

j'ai eu le même problème récemment, où $(window).mousewheel revenait undefined

ce que j'ai fait était $(window).on('mousewheel', function() {});

pour le traiter, J'utilise:

function (event) {
    var direction = null,
        key;

    if (event.type === 'mousewheel') {
        if (yourFunctionForGetMouseWheelDirection(event) > 0) {
            direction = 'up';
        } else {
            direction = 'down';
        }
    }
}