plugin - Use jQuery para verificar el evento de la rueda del mouse sin la barra de desplazamiento

scroll personalizado

Question

Cómo comprobar el movimiento de la rueda del mouse sin la barra de desplazamiento?

$(document).mousewheel(function() {
     clicker.html("a7a");
});

Answer 1

Y, si no quiere usar ningún complemento (IE8, Chrome, Firefox, Safari, Opera ...), solo haga esto:

if (document.addEventListener) {
    document.addEventListener("mousewheel", MouseWheelHandler(), false);
    document.addEventListener("DOMMouseScroll", MouseWheelHandler(), false);
} else {
    sq.attachEvent("onmousewheel", MouseWheelHandler());
}


function MouseWheelHandler() {
    return function (e) {
        // cross-browser wheel delta
        var e = window.event || e;
        var delta = Math.max(-1, Math.min(1, (e.wheelDelta || -e.detail)));

        //scrolling down?
        if (delta < 0) {
            alert("Down");
        }

        //scrolling up?
        else {
             alert("Up");
        }
        return false;
    }
}

Ejemplo viviente: http://jsfiddle.net/CvCc6/1/

Answer 2

usa este código

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

Answer 3

Te recomiendo que uses este plugin jQuery: PLUGIN

Sin un complemento, pruebe este ejemplo: EJEMPLO

HTML:

<div id=''foo'' style=''height:300px; width:300px; background-color:red''></div>

Javascript:

$(''#foo'').bind(''mousewheel'', function(e) {
    if(e.originalEvent.wheelDelta / 120 > 0) {
        alert(''up'');
    } else {
        alert(''down'');
    }
});

No hay barra de desplazamiento en el div pero se detecta el evento de rueda.

Answer 4

Esta es solo una actualización de la respuesta de @ Aaron, utilizando el nuevo evento "rueda", que se describe aquí: https://developer.mozilla.org/en-US/docs/Web/Events/wheel

$(''#foo'').on(''wheel'', function(e){
    if(e.originalEvent.deltaY < 0) {
        console.log(''scrolling up !'');
    } else{
        console.log(''scrolling down !'');
    }
});

También puedes usar deltaX para ver scroll horizontal, o deltaZ si tienes algo loco en 3D.