Obter events de roda do mouse em jQuery?

Existe uma maneira de obter os events de roda do mouse (não falando sobre events de scroll ) em jQuery?

    Há um plug – in que detecta a roda do mouse para cima / baixo e a velocidade em uma região.

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

    A binding ao DOMMouseScroll e DOMMouseScroll acabou funcionando muito bem para mim:

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

    Este método está funcionando no IE9 +, no Chrome 33 e no Firefox 27.


    Editar - mar 2016

    Eu decidi revisitar esta questão desde que já faz um tempo. A página MDN para o evento de rolagem tem uma ótima maneira de recuperar a posição de rolagem que faz uso de requestAnimationFrame , que é altamente preferível ao meu método de detecção anterior. Eu modifiquei o código deles para fornecer melhor compatibilidade, além de rolar a direção e a posição:

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

    As respostas que falam sobre o evento “mousewheel” estão se referindo a um evento reprovado. O evento padrão é simplesmente “roda”. Veja https://developer.mozilla.org/pt-BR/docs/Web/Reference/Events/wheel

    A partir de agora em 2017, você pode simplesmente escrever

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

    Funciona com o atual Firefox 51, Chrome 56, IE9 +

    Isso funcionou para mim 🙂

      //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

    Aqui está uma solução de baunilha. Pode ser usado no jQuery se o evento passado para a function for event.originalEvent que o jQuery disponibiliza como propriedade do evento jQuery. Ou, se dentro da function de callback , adicionarmos antes da primeira linha: event = event.originalEvent; .

    Este código normaliza a velocidade / quantidade da roda e é positivo para o que seria uma rolagem para frente em um mouse típico e negativo em um movimento de roda do mouse para trás.

    Demonstração: 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); 

    Há também um plugin para jQuery, que é mais detalhado no código e um pouco de açúcar extra: https://github.com/brandonaaron/jquery-mousewheel

    Isso está funcionando em cada versão do 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"); } }); }); 

    Eu estava preso nesta edição hoje e encontrei este código está funcionando bem para mim

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

    use este código

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

    minha combinação se parece com isso. ela desaparece e desaparece em cada rolagem para baixo / para cima. caso contrário, você precisará rolar até o header para desvanecer o header.

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

    o acima não é otimizado para touch / mobile, acho que este é melhor para todos os dispositivos móveis:

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

    O plugin que @DarinDimitrov postou, jquery-mousewheel , é quebrado com jQuery 3+ . Seria mais aconselhável usar o jquery-wheel que funciona com o jQuery 3+.

    Se você não quiser ir para a rota jQuery, o MDN alerta muito com o uso do evento mousewheel , pois ele não é padrão e não é suportado em muitos lugares. Em vez disso, diz que você deve usar o evento de wheel medida que obtém muito mais especificidade do que exatamente os valores que você está obtendo. É suportado pela maioria dos principais navegadores.

    Se usar o plugin jquery mousewheel mencionado, então o que usar o segundo argumento da function de manipulador de events – delta :

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

    Eu tenho o mesmo problema recentemente onde $(window).mousewheel estava retornando undefined

    O que eu fiz foi $(window).on('mousewheel', function() {});

    Além de processá-lo, estou usando:

     function (event) { var direction = null, key; if (event.type === 'mousewheel') { if (yourFunctionForGetMouseWheelDirection(event) > 0) { direction = 'up'; } else { direction = 'down'; } } }