Llamar de desplazamiento sólo cuando el usuario se desplaza, no cuando animado ()

Question

Tengo un par de enlaces a través de la página con el propósito de "ir a la cima", realizada por el desplazamiento de la página a la parte superior con una bonita animación. Me he dado cuenta de que a veces mientras que la página se desplaza el usuario va a querer desplazarse hacia abajo, por ejemplo, pero esto no es posible. La pantalla sólo tartamudear, pero continuará animando hasta que llega a la parte superior.

Quiero detener la animación si el usuario intenta desplazarse, por lo tanto, he escrito este código:

$('#gototop').click(function() {
    $('body').animate({scrollTop:0},3000);
    $(window).scroll(function () {
        $('body').stop();
});
    return false;
})

Este código es problemático, porque lo animado () cuenta como el desplazamiento, por lo que sólo se mueve un poquito antes de que se detenga en sí.

También he intentado manipulador cerrado como una opción, pero el desplazamiento del ratón no se registra como una clave.

¿Hay alguna manera de llamar a mi función de desplazamiento cuando el usuario pergaminos, no lo animado ()?

Answer 1

Se podría hacer escribir su propio código para establecer el valor de la animación, y establecer un indicador que indica que el cambio viene de una animación.

Por ejemplo: (no probado)

var scrollAnimating = false
jQuery.fx.step.scrollTop = function(E) {
    scrollAnimating = true;
    E.elem.scrollTop = E.now;
    scrollAnimating = false;
};

$('#gototop').click(function() {
    $('body').animate({scrollTop:0},3000);
    $(window).scroll(function () {
        if (!scrollAnimating)
            $('body').stop();
    });
    return false;
})

Usted puede hacer lo mismo para scrollLeft.

Tenga en cuenta que estoy suponiendo que la fijación de scrollTop es una llamada entrante, por lo que el evento se dispara scroll dentro de la línea de E.elem.scrollTop = E.now. Si no es reentrante (que podría ser sólo en algunos navegadores), el evento será despedido después scrollAnimating se vuelve a establecer en false. Para corregir esto, se podía restablecer scrollAnimating dentro del evento scroll.

Answer 2

Yo estaba con el mismo problema, pero he encontrado una solución correcta en jQuery Documentación. Hay una propiedad en el método animado que le permite establecer una función de devolución de llamada cuando se ha completado la animación.

http://api.jquery.com/animate/ # animados-properties-duración-flexibilización completa

Este es el código:

$('#gototop').click(function() {

    //This will help you to check 
    var animationIsFinished = false;

    $('body').animate({scrollTop:0},3000,"swing",function(){

        //this function is called when animation is completed
        animationIsFinished = true;

    });
    $(window).scroll(function () {
        //Check if animation is completed
        if ( !animationIsFinished ){
            $('body').stop();
        }
    });
    return false;
})

Answer 3

lo descubrió! Después de mirar en Internet me encontré con algo que se llama Document.addEventListener para Mozilla y document.onmousewheel para IE y Opera que cogerá el desplazamiento eventos.

$('#gototop').click(function() {
    $('body').animate({scrollTop:0},3000);

    if(window.addEventListener) document.addEventListener('DOMMouseScroll', stopScroll, false);
    document.onmousewheel = stopScroll;

    function stopScroll() {$('body').stop()};

    return false;
})