要素が運動量のスクロールを停止したかどうかを検出しますか？

Question

要素がJavascript経由でMobile Safariでスクロールを停止したかどうかを検出することは可能ですか？

私は、-webkit-overflow-scrolling:touchを使用して勢いをスクロールする要素を持っています。勢いがスクロールに影響を与えた後も、要素がスクロールを停止したかどうかを検出する必要があります。

これは可能ですか？ onscrollイベントを使用することは、アプリ内で行うべきではありません。

Answer 1

スワイプの速度を計算して、何らかのしきい値に基づいてモーメントスクロールが発生するかどうかを調べることができます。私はいくつかのテストを行い、約0.25ピクセル/ msの値が良いと思われます。

注：速度が低い場合でも勢いがスクロールすることがあります。私が記録した運動量のスクロールを引き起こす最も低い速度は0.13（非常に短いデルタ時間で）だったので、100％完璧な解決策が必要な場合は、探し続ける。

このコード例では、オーバースクロールも検出して処理します。

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

これは完全に働いた：スクロールが停止したとき

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

は 'scrollfinished' イベントを公開します。