Chiamata di scorrimento solo quando utente scorre, non quando animate ()

Question

Ho un paio di link sulla pagina con lo scopo di "andare verso l'alto", realizzato scorrendo la pagina verso l'alto con una bella animazione. Ho notato che a volte mentre la pagina scorre l'utente vorrà scorrere verso il basso, per esempio, ma questo non è possibile. Lo schermo solo balbettare, ma continuerà l'animazione fino a raggiungere la cima.

Voglio interrompere l'animazione, se l'utente tenta di scorrere, quindi ho scritto questo codice:

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

Questo codice è problematico, perché l'animate () conta come lo scorrimento, quindi, si muove solo un pochino prima che si ferma.

Ho anche provato a chiave giù come una possibilità, ma di scorrimento del mouse non registra come chiave.

C'è un modo per chiamare la mia funzione di scorrimento quando utente pergamene, non l'animate ()?

Answer 1

Si potrebbe fare scrivere il proprio codice per impostare il valore di animazione, e impostare un flag che indica che il cambiamento viene da un'animazione.

Ad esempio: (testato)

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

Si può fare la stessa cosa per scrollLeft.

Si noti che sto supponendo che l'impostazione scrollTop è una chiamata rientrante, in modo che l'evento scroll viene generato all'interno della linea E.elem.scrollTop = E.now. Se non è rientrante (che potrebbe essere solo in alcuni browser), l'evento sarà licenziato dopo scrollAnimating viene arretrato a false. Per risolvere questo, si potrebbe ripristinare scrollAnimating all'interno della manifestazione scroll.

Answer 2

Sono stato con lo stesso problema, ma ho trovato una soluzione giusta su jQuery documentazione. C'è una proprietà in modo animato che permette di impostare una funzione di callback quando l'animazione è stata completata.

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

Ecco il codice:

$('#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! Dopo aver cercato su Internet ho trovato qualcosa chiamato Document.addEventListener per Mozilla e document.onmousewheel per IE e Opera che cattura lo scorrimento eventi.

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