Wykryj, czy element przestał przewijać momentum?

Question

Czy można wykryć, czy element przestał przewijać w Mobile Safari przez Javascript?

Mam element, który ma pęd przewijania za pomocą -webkit-overflow-scrolling:touch, i muszę wykryć, czy element przestał przewijanie, w tym po wpływem pędu wpływa na przewijania.

Czy to możliwe? Korzystanie z wydarzenia onscroll nie działa tak, jak powinno w mojej aplikacji.

Answer 1

można obliczyć prędkość bezstykowa i spróbować dowiedzieć się, czy pędu przewijania nastąpi na podstawie pewnej wartości progowej. Zrobiłem kilka testów i około 0.25 pikseli/ms wydaje się być dobrą wartością.

Uwaga: Czasami przewijanie pędu będzie występować również dla mniejszych prędkości. Najniższa prędkość powodująca przewijanie pędu, które zarejestrowałem, wynosiła 0,13 (z bardzo krótkim czasem delta), więc jeśli potrzebujesz 100% idealnego rozwiązania, szukaj dalej.

Kod przykładowy wykrywa i radzi sobie z przewijaniem.

Korzystanie z 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

W moim przypadku to działało idealnie:

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

Publish 'scrollfinished' zdarzenie podczas przewijania został zatrzymany.