Jquery .animate() interrompe lo scorrimento quando l'utente scorre manualmente?

Question

Ho impostato uno snippet che fa scorrere una sezione di pagina in vista quando viene cliccato, il problema è che se l'utente vuole scorrere al centro dell'animazione, la pergamena scorre leggermente.

$("section").click(function(e) { 
     $('html,body').animate({ scrollTop: $(this).position().top }, 'slow'); 
     return false; 
    }); 

Come posso interrompere l'animazione jquery se l'utente scorre manualmente?

Answer 1

Cambiare la funzione a questo:

var page = $("html, body"); 

$("section").click(function(e) { 

    page.on("scroll mousedown wheel DOMMouseScroll mousewheel keyup touchmove", function(){ 
     page.stop(); 
    }); 

    page.animate({ scrollTop: $(this).position().top }, 'slow', function(){ 
     page.off("scroll mousedown wheel DOMMouseScroll mousewheel keyup touchmove"); 
    }); 

    return false; 
}); 

Questo sarà:

• interrompere l'animazione, se l'utente scorre manualmente (solo durante l'animazione)
• non ostruisce il vostro normale animazione jQuery, ad esempio alcune delle altre risposte sarebbero

---

Alcune informazioni in più:

Perché vincolanti per tutti quegli eventi? "scroll mousewheel etc ..."

Esistono molti tipi diversi di eventi di scorrimento. Puoi scorrere verso il basso usando il tuo mouse, tastiera, touchscreen, ecc. Con questo ci assicuriamo di prendere lo di tutti gli di questi.

A cosa serve var page = $("html, body");? Non posso semplicemente usare $("html, body") ovunque?

Se si utilizza lo stesso selettore più di una volta, è consigliabile memorizzarli nella cache in un variable. Sarà più facile da scrivere/utilizzare e offre prestazioni migliori rispetto al fatto che il programma ricalcoli il selettore ogni volta.

Dove posso trovare ulteriori informazioni su .animate() e .stop()?

È possibile leggere la documentazione di jQuery per .animate() e .stop(). Raccomando anche di leggere su animation queue's dal .stop() funziona su questo principio.

Answer 2

$("your selector").scroll(function(){ 
$('html,body').stop(); 
}); 

riferimento stop

Answer 3

Prova questa

$('html,body').scroll(function() { 
    $(this).stop(true, false); 
}); 

Sarà anche rimuovere tutte le altre animazioni dalla coda dell'elemento, ma non sarà "saltare" alla fine dell'animazione di scorrimento corrente.

Answer 4

lo farei rilevando eventi utente

$('body,html').bind('scroll mousedown wheel DOMMouseScroll mousewheel keyup touchmove', function (e) { 
    if (e.which > 0 || e.type == "mousedown" || e.type == "mousewheel" || e.type == "touchmove") { 
    $("html,body").stop(); 
    } 
}); 

Ecco a good tutorial.