Rufen Sie die Scrollen nur an, wenn Benutzer scrolls, nicht bei Animate ()

Question

Ich habe ein paar Links auf der Seite mit dem Zweck, "nach oben zu gehen", indem ich die Seite mit einer schönen Animation nach oben scrollen kann. Mir ist aufgefallen, dass der Benutzer manchmal, während die Seite scrollt, zum Beispiel wieder nach unten scrollen möchte, aber dies ist nicht möglich. Der Bildschirm wird nur stottern, sich aber weiter animieren, bis er oben erreicht wird.

Ich möchte die Animation stoppen, wenn der Benutzer versucht, zu scrollen, daher habe ich diesen Code geschrieben:

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

Dieser Code ist problematisch, da die Animate () als Scrollen zählt, daher bewegt er sich nur ein kleines Stück, bevor es sich selbst stoppt.

Ich habe auch Key-Down als Option ausprobiert, aber Maus Scrollen registriert sich nicht als Schlüssel.

Gibt es eine Möglichkeit, meine Scroll -Funktion aufzurufen, wenn die Benutzer Scrollen, nicht die Animate ()?

Answer 1

Sie können Ihren eigenen Code schreiben, um den Animationswert festzulegen, und ein Flag festlegen, das angibt, dass die Änderung aus einer Animation stammt.

Zum Beispiel: (ungetestet)

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

Sie können das Gleiche für scrollLeft.

Beachten Sie, dass ich diese Einstellung übernehme scrollTop ist ein wieder eingetretener Anruf, so dass die scroll Das Ereignis wird in die Linie abgefeuert E.elem.scrollTop = E.now. Wenn es nicht wieder eingetreten ist (es könnte nur in einigen Browsern sein), wird das Ereignis danach abgefeuert scrollAnimating wird zurückgeschützt zu false. Um das zu beheben, können Sie zurücksetzen scrollAnimating im Inneren scroll Veranstaltung.

Answer 2

Ich hatte das gleiche Problem, aber ich fand eine Lösung direkt in der JQuery -Dokumentation. Es gibt eine Eigenschaft in Animate -Methode, mit der Sie eine Rückruffunktion festlegen können, wenn die Animation abgeschlossen ist.

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

Hier ist der 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

Herausgefunden! Nachdem ich mich im Internet umgesehen hatte, fand ich etwas namens namens Document.addEventListener für Mozilla und document.onmousewheel für IE und Oper, die Scrolling -Events erfassen.

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