Ricevi eventi della rotellina del mouse in jQuery?

C'è un modo per ottenere gli eventi della rotellina del mouse (senza parlare di scrolleventi) in jQuery?

C'è un plugin che rileva la rotellina del mouse su / giù e la velocità su una regione.

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

Vincolante per entrambi mousewheele ha DOMMouseScrollfinito per funzionare davvero bene per me:

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

Questo metodo funziona in IE9 +, Chrome 33 e Firefox 27.

Modifica - Mar 2016

Ho deciso di rivisitare questo problema da un po 'di tempo. La pagina MDN per l'evento scroll ha un ottimo modo per recuperare la posizione di scorrimento che utilizza requestAnimationFrame, che è altamente preferibile al mio precedente metodo di rilevamento. Ho modificato il loro codice per fornire una migliore compatibilità oltre alla direzione e posizione dello scorrimento:

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

Questo codice sta attualmente funzionando Chrome v50, Firefox v44, Safari v9, and IE9+

Riferimenti:

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

A partire da ora nel 2017, puoi semplicemente scrivere

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

Funziona con l'attuale Firefox 51, Chrome 56, IE9 +

Le risposte che parlano dell'evento "rotellina del mouse" si riferiscono a un evento obsoleto. L'evento standard è semplicemente "ruota". Vedi https://developer.mozilla.org/en-US/docs/Web/Reference/Events/wheel

Questo ha funzionato per me :)

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

da StackOverflow

Ecco una soluzione alla vaniglia. Può essere utilizzato in jQuery se l'evento passato alla funzione è event.originalEventquale jQuery rende disponibile come proprietà dell'evento jQuery. O se all'interno della callbackfunzione in aggiungiamo prima prima riga: event = event.originalEvent;.

Questo codice normalizza la velocità / quantità della ruota ed è positivo per quello che sarebbe uno scorrimento in avanti in un mouse tipico e negativo in un movimento della ruota del mouse all'indietro.

Demo: 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);

C'è anche un plugin per jQuery, che è più dettagliato nel codice e un po 'di zucchero extra: https://github.com/brandonaaron/jquery-mousewheel

Questo funziona in ogni versione di IE, Firefox e Chrome.

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

Sono stato bloccato in questo problema oggi e ho scoperto che questo codice funziona bene per me

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

usa questo codice

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

la mia combinazione è simile a questa. svanisce e si dissolve in ogni scorrimento verso il basso / verso l'alto. altrimenti devi scorrere fino all'intestazione, per far scomparire l'intestazione.

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

quello sopra non è ottimizzato per touch / mobile, penso che questo lo faccia meglio per tutti i dispositivi mobili:

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;

});

Il plugin che ha pubblicato @DarinDimitrov jquery-mousewheel, è rotto con jQuery 3+ . Sarebbe più consigliabile utilizzare ciò jquery-wheelche funziona con jQuery 3+.

Se non si desidera seguire il percorso jQuery, MDN consiglia vivamente di utilizzare l' mousewheelevento poiché non è standard e non è supportato in molti punti. Dice invece che dovresti usare l' wheelevento poiché ottieni molta più specificità esattamente sul significato dei valori che stai ottenendo. È supportato dalla maggior parte dei browser principali.

Se si utilizza il plugin jwery mousewheel menzionato , allora che cosa si intende per utilizzare il secondo argomento della funzione del gestore eventi - delta:

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

Recentemente ho avuto lo stesso problema dove $(window).mousewheelstava tornandoundefined

Quello che ho fatto è stato $(window).on('mousewheel', function() {});

Inoltre per elaborarlo sto usando:

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

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