Appel défilement que lorsque l'utilisateur fait défiler, pas quand Animate ()

Question

J'ai quelques liens à travers la page dans le but « d'aller vers le haut », accompli en faisant défiler la page vers le haut avec une belle animation. J'ai remarqué que, parfois, alors que la page défile l'utilisateur voudra faire défiler vers le bas, par exemple, mais cela est impossible. L'écran ne bégayer mais continuera animant jusqu'à ce qu'il atteigne le haut.

Je veux arrêter l'animation si l'utilisateur tente de faire défiler, donc je l'ai écrit ce code:

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

Ce code est problématique, car le Animer () compte que le défilement, donc il ne se déplace un petit peu avant qu'il ne s'arrête.

J'ai aussi essayé la clé vers le bas comme une option, mais le défilement de la souris n'enregistre pas comme clé.

Est-il possible d'appeler ma fonction de défilement lorsque le utilisateur défile, pas Animate ()?

Answer 1

Vous pouvez faire écrire votre propre code pour définir la valeur d'animation, et définir un indicateur indiquant que le changement vient d'une animation.

Par exemple: (non testé)

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

Vous pouvez faire la même chose pour scrollLeft.

Notez que je suppose que la mise en scrollTop est un appel rentrante, de sorte que l'événement scroll est tiré à l'intérieur de la ligne E.elem.scrollTop = E.now. Si ce n'est pas rentrante (il pourrait être que dans certains navigateurs), l'événement sera tiré après scrollAnimating se remis à false. Pour résoudre ce problème, vous pouvez réinitialiser scrollAnimating l'intérieur de l'événement scroll.

Answer 2

J'étais avec le même problème, mais j'ai trouvé une bonne solution sur la documentation jQuery. Il existe une propriété de méthode Animer qui vous permet de définir une fonction de rappel lorsque l'animation est terminée.

http://api.jquery.com/animate/ # animate propriétés durée d'assouplissement -complet

Voici le code:

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

figured it out! Après avoir regardé autour sur Internet j'ai trouvé quelque chose appelé Document.addEventListener pour Mozilla et document.onmousewheel pour IE et Opera qui va attraper les événements de défilement.

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