web-dev-qa-db-fra.com

Obtenir des événements de molette de la souris dans jQuery?

Existe-t-il un moyen d'obtenir les événements de molette de la souris (sans parler des événements scroll) dans jQuery?

javascriptjquerymousewheel
114
thejh

Il existe un plugin qui détecte la molette de la souris et la vélocité vers le haut/bas sur une région.

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

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

35
Brian Di Palma

À partir de maintenant en 2017, vous pouvez simplement é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 et IE9 + actuels

31
Louis Ameline

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

15
Anjith K P

Voici une solution à la vanille. Peut être utilisé dans jQuery si l'événement transmis à la fonction est event.originalEvent que jQuery rend disponible en tant que propriété de l'événement jQuery. Ou si à l'intérieur de la fonction callback sous, 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 pour un mouvement de molette vers l’arrière.

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 détaillé dans le code et du sucre supplémentaire: https://github.com/brandonaaron/jquery-mousewheel

14
Sergio

Cela fonctionne dans les dernières versions d'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");
            }
        });
    });
8
futuredayv

J'étais coincé dans ce numéro aujourd'hui et j'ai trouvé que ce code fonctionnait 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');
    }
});
4
Prafull Sharma

utiliser ce code

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

Le plugin que @DarinDimitrov a publié, jquery-mousewheel, est cassé avec jQuery 3+ . Il serait plus judicieux d'utiliser jquery-wheel qui fonctionne avec jQuery 3+.

Si vous ne souhaitez pas utiliser la route jQuery, MDN recommande vivement l’événement mousewheel car il est non standard et non pris en charge dans de nombreux cas. Au lieu de cela, il est indiqué que vous devez utiliser l'événement wheel , car vous obtenez beaucoup plus de précision sur la signification exacte des valeurs que vous obtenez. Il est supporté par la plupart des navigateurs majeurs.

0
Coburn

Si vous utilisez le plugin jquery mousewheel mentionné précédemment , alors qu’en est-il d’utiliser le deuxième argument de la fonction de gestionnaire d’événements - delta:

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

ma combinaison ressemble à ceci. il s'estompe et apparaît à chaque défilement vers le haut/le bas. sinon, vous devez faire défiler jusqu'à l'en-tête, pour fondre l'en-tête dans.

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

le précédent n'est pas optimisé pour le toucher/mobile, je pense que celui-ci le fait 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;

});
0
Thomas Hartmann