Ligue para a rolagem apenas quando o usuário rola, não quando Animate ()

Question

Eu tenho alguns links em toda a página com o objetivo de "ir para o topo", realizado rolando a página para o topo com uma boa animação. Percebi que, às vezes, enquanto a página está rolando o usuário, desejará rolar de volta, por exemplo, mas isso não é possível. A tela só ganha, mas continuará animando até chegar ao topo.

Quero parar a animação se o usuário tentar rolar, portanto, escrevi este código:

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

Esse código é problemático, porque o Animate () conta como rolagem, portanto, ele só move um pouco antes de parar.

Também tentei o Key-Down como uma opção, mas o rolagem do mouse não se registra como chave.

Existe alguma maneira de chamar minha função de rolagem quando o do utilizador Rolls, não o Animate ()?

Answer 1

Você pode fazer escrever seu próprio código para definir o valor da animação e definir um sinalizador indicando que a alteração vem de uma animação.

Por exemplo: (não testado)

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

Você pode fazer a mesma coisa para scrollLeft.

Observe que estou assumindo essa configuração scrollTop é uma chamada reentrante, para que o scroll Evento é demitido dentro da linha E.elem.scrollTop = E.now. Se não for reentrante (pode ser apenas em alguns navegadores), o evento será demitido depois scrollAnimating é recolocado para false. Para consertar isso, você pode redefinir scrollAnimating dentro de scroll evento.

Answer 2

Eu estava com o mesmo problema, mas encontrei uma solução na documentação do jQuery. Existe uma propriedade no método Animate que permite definir uma função de retorno de chamada quando a animação é concluída.

http://api.jquery.com/animate/#animate-properties-duration-easing-complete

Aqui está o 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

Descobriu! Depois de olhar em volta na internet, encontrei algo chamado Document.addEventListener para Mozilla e document.onmousewheel Para o IE e a ópera, que capturam eventos de rolagem.

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