Scroll nur aufrufen, wenn der Benutzer scrollt, nicht bei animate()

Question

Ich habe einige Links auf der Seite, die den Zweck haben, "nach oben zu gehen", was durch das Scrollen der Seite nach oben mit einer schönen Animation erreicht wird. Mir ist aufgefallen, dass der Benutzer manchmal während des Scrollens der Seite zurück nach unten scrollen möchte, aber das ist nicht möglich. Der Bildschirm stottert nur, aber die Animation wird fortgesetzt, bis er den oberen Rand erreicht.

Ich möchte die Animation stoppen, wenn der Benutzer versucht zu blättern, deshalb habe ich diesen Code geschrieben:

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

Dieser Code ist problematisch, weil animate() als Scrollen zählt und sich daher nur ein kleines Stück bewegt, bevor es sich selbst stoppt.

Ich habe auch versucht, die Taste nach unten als Option zu verwenden, aber der Mauslauf wird nicht als Taste registriert.

Gibt es eine Möglichkeit, meine Bildlauffunktion aufzurufen, wenn die Benutzer scrollt, nicht die animate()?

Answer 1

Sie könnten Ihren eigenen Code schreiben, um den Animationswert zu setzen, und ein Flag setzen, das anzeigt, dass die Änderung von 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 dasselbe tun für scrollLeft .

Beachten Sie, dass ich davon ausgehe, dass die Einstellung scrollTop ist ein ablaufinvarianter Aufruf, so dass die scroll Ereignis wird innerhalb der Zeile ausgelöst E.elem.scrollTop = E.now . Wenn es nicht reentrant ist (dies kann nur in einigen Browsern der Fall sein), wird das Ereignis ausgelöst, nachdem scrollAnimating wird zurückgesetzt auf false . Um dies zu beheben, können Sie die scrollAnimating innerhalb der scroll Veranstaltung.

Answer 2

Ich war mit dem gleichen Problem, aber ich fand eine Lösung rechts auf jQuery Dokumentation. Es gibt eine Eigenschaft in animate-Methode, die Sie eine Callback-Funktion 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

Ich habe es herausgefunden! Nachdem ich mich im Internet umgesehen hatte, fand ich etwas namens Document.addEventListener für Mozilla und document.onmousewheel für IE und Opera, die Bildlaufereignisse abfangen.

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