Rileva se l'elemento ha interrotto lo scorrimento del momento?

Question

E 'possibile rilevare se un elemento ha smesso di scorrere in Mobile Safari tramite Javascript?

Ho un elemento che ha lo slancio di scorrimento utilizzando -webkit-overflow-scrolling:touch e ho bisogno di rilevare se l'elemento ha smesso di scorrere, anche dopo che lo slancio influenza lo scorrimento.

È possibile? L'utilizzo dell'evento onscroll non funziona come dovrebbe all'interno della mia app.

Answer 1

È possibile calcolare una velocità di scorrimento e cercare di capire se si verificherà lo scorrimento del momento in base a un valore di soglia. Ho fatto alcuni test e circa 0,25 pixel/ms sembra essere un buon valore.

Nota: talvolta lo scorrimento del momento si verifica anche a velocità inferiori. La velocità più bassa per causare lo scorrimento del momento che ho registrato è stata 0,13 (con tempo di delta molto breve), quindi se hai bisogno di una soluzione perfetta al 100%, continua a cercare.

Il codice di esempio rileva e gestisce anche l'overscrolling.

Utilizzo di JQuery;

var scrollWrapper = $('#myWrapper'); 
var starTime, startScroll, waitForScrollEvent; 
scrollWrapper.bind('touchstart', function() { 
    waitForScrollEvent = false; 
}); 

scrollWrapper.bind('touchmove', function() { 
    startTime = new Date().getTime(); startScroll = scrollWrapper.scrollTop(); 
}); 

scrollWrapper.bind('touchend', function() { 
    var deltaTime = new Date().getTime() - startTime; 
    var deltaScroll = Math.abs(startScroll - scrollWrapper.scrollTop()); 
    if (deltaScroll/deltaTime>0.25 
     || scrollWrapper.scrollTop()<0 
     || scrollWrapper.scrollTop()>scrollWrapper.height()) { 
    // will cause momentum scroll, wait for 'scroll' event 
    waitForScrollEvent = true; 
    } 
    else { 
    onScrollCompleted(); // assume no momentum scroll was initiated 
    } 
    startTime = 0; 
}); 

scrollWrapper.bind('scroll', function() { 
    if (waitForScrollEvent) { 
    onScrollCompleted(); 
    } 
}); 

Answer 2

Nel mio caso questo ha funzionato perfettamente:

var timer; 
$(scrollWrapper).on('scroll',function(e){ 
    if(timer){ 
     clearTimeout(timer); 
    } 
    timer = setTimeout(function(){ 
     $(this).trigger('scrollFinished'); 
    }, 55) 
}) 



$(scrollWrapper).on('scrollFinished',function(){ 
     // will be called when momentum scroll is finished 
    }) 

Pubblica 'scrollfinished' evento quando scorrimento si è fermato.