wheel - ¿Cómo puedo diferenciar un desplazamiento manual(a través de la rueda del mouse/barra de desplazamiento) desde un desplazamiento de Javascript/jQuery?

scroll horizontally with mouse wheel

Question

ACTUALIZAR:

Aquí hay un ejemplo de jsbin que demuestra el problema.

ACTUALIZACIÓN 2:
Y aquí está la versión fija gracias a fudgey .

Básicamente, tengo el siguiente javascript que desplaza la ventana a un ancla en la página:

 // get anchors with href''s that start with "#"
 $("a[href^=#]").live("click", function(){
     var target = $($(this).attr("href"));
     // if the target exists: scroll to it...
     if(target[0]){
         // If the page isn''t long enough to scroll to the target''s position
         // we want to scroll as much as we can. This part prevents a sudden 
         // stop when window.scrollTop reaches its maximum.
         var y = Math.min(target.offset().top, $(document).height() - $(window).height());
         // also, don''t try to scroll to a negative value...
         y=Math.max(y,0);
         // OK, you can scroll now...
         $("html,body").stop().animate({ "scrollTop": y }, 1000);
     }
     return false;
 });

Funciona perfectamente ... hasta que intente manualmente desplazar la ventana. Cuando se desplaza la barra de desplazamiento o la rueda del mouse, necesito detener la animación de desplazamiento actual ... pero no estoy seguro de cómo hacerlo.

Este es probablemente mi punto de partida ...

$(window).scroll(e){
    if(IsManuallyScrolled(e)){
        $("html,body").stop();
    }
} 

... pero no estoy seguro de cómo codificar la función IsManuallyScrolled . He comprobado e (el objeto del event ) en la consola de Google Chrome y AFAIK no hay forma de diferenciar entre un desplazamiento manual y el desplazamiento animate() jQuery.

¿Cómo puedo diferenciar entre un desplazamiento manual y uno llamado a través de la función $.fn.animate jQuery?

Answer 1

Podría establecer una variable para indicar que su llamada a animación estaba activa, luego verifique esa variable dentro del controlador de desplazamiento.

window.IsAutoScrolling = true;
$("html,body").stop().animate({ "scrollTop": y }, 1000);
// Do something to set IsAutoScrolling = false, when the animation is done.

$(window).scroll(e){  
if(!window.IsAutoScrolling){  
    $("html,body").stop();  
}  

Answer 2

Prueba esta función:

$(''body,html'').bind(''scroll mousedown wheel DOMMouseScroll mousewheel keyup'', function(e){
 if ( e.which > 0 || e.type == "mousedown" || e.type == "mousewheel"){
  $("html,body").stop();
 }
})

Además, ¿viste este tutorial ?

Actualización: los navegadores modernos ahora usan "wheel" como el evento, así que lo he incluido en el código anterior.

Answer 3

Tuve tu mismo problema hace unos días. No deberías estar usando la función animada de jquery. Si deseas obtener ese resultado, debes simular la animación usando una función de sondeo.

Hice esta clase que supuestamente proporciona un desplazamiento suave cuando se llama a ScrollDown.slow () .

ScrollDown.current=$(window).scrollTop();
ScrollDown.lastValue;
ScrollDown.lastType;
ScrollDown.enabled=true;
ScrollDown.custom=function(value,rate){  //let''s say value===''bottom'' and rate=10
    if(value===''bottom''){
        value=$(document).height()-$(window).height();
    }
    ScrollDown.current=$(window).scrollTop();
    ScrollDown.lastValue=value;
    (function poll(){
        setTimeout(function(){
            var prev=$(window).scrollTop();  //This is the critical part
            /*I''m saving again the scroll position of the window, remember
            10 ms have passed since the polling has started
            At this rate, if the user will scroll up for down pre!==ScrollDown.current
            And that means I have to stop scrolling.*/
            ScrollDown.current++; //increasing the scroll variable so that it keeps scrolling
            $(window).scrollTop(ScrollDown.current);
            if(ScrollDown.current<ScrollDown.lastValue && ScrollDown.enabled){  
            //ScrollDown.current<ScrollDown.lastValue basically checks if it''s reached the bottom
                if(prev!==ScrollDown.current-1){
                /*I''m checking if the user 
                scrolled up or down while the polling has been going on, 
                if the user scrolls up then prev<ScrollDown.current-1, 
                if the user scrolls down then prev>ScrollDown.current-1 
                and at the next poll() the scrolling will stop 
                because ScrollDown.enabled will bet set to false by ScrollDown.stop()*/
                    ScrollDown.stop();
                }
                poll();
            }
        },rate);
    })();
};

ScrollDown.stop=function(){
    ScrollDown.enabled=false;
};

ScrollDown.continue=function(){
    ScrollDown.enabled=true;
    switch (ScrollDown.lastType){
        case "fast":
            ScrollDown.fast(ScrollDown.lastValue);
            break;
        case "normal":
            ScrollDown.normal(ScrollDown.lastValue);
            break;
        case "slow":
            ScrollDown.slow(ScrollDown.lastValue);
            break;
    }
};

ScrollDown.fast=function(value){
    if(!ScrollDown.enabled){
        ScrollDown.continue();
    }else{
        ScrollDown.lastType=''fast'';
        ScrollDown.custom(value,1);
    }
};
ScrollDown.normal=function(value){
    if(!ScrollDown.enabled){
        ScrollDown.continue();
    }else{
        ScrollDown.lastType=''normal'';
        ScrollDown.custom(value,10);
    }
};
ScrollDown.slow=function(value){
    if(!ScrollDown.enabled){
        ScrollDown.continue();
    }else{
        ScrollDown.lastType=''slow'';
        ScrollDown.custom(value,50);
    }
};
function ScrollDown(){}

Por lo tanto, si llamara a ScrollDown.slow (''abajo'') , comenzaría a desplazarse lentamente hasta que llegue al final de la página, a menos que se desplace hacia arriba o hacia abajo manualmente, luego se detendrá.