檢測元素是否停止動量滾動？

是否可以通過Javascript檢測元素是否停止在Mobile Safari中滾動？檢測元素是否停止動量滾動？

我有一個使用-webkit-overflow-scrolling:touch勢頭滾動的元素，我需要檢測元素是否停止滾動，包括動量影響滾動之後。

這可能嗎？使用onscroll事件不能正常工作，因爲它應該在我的應用程序中。

來源

2012-12-11 Charlie

您可以計算滑動速度，並嘗試找出動量滾動是否會根據某個閾值發生。我已經做了一些測試，大約0.25像素/毫秒似乎是一個很好的價值。

注意：有時動量滾動也會發生在較低的速度。導致我記錄的動量滾動的最低速度爲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(); 
    } 
});

來源

2014-04-01 13:26:49 dagge

這太棒了！我一直在努力製作一個內部div可以滾動，並通過啓動勢頭，我已經走出了窗戶的所有捕捉邏輯。您缺少一對逗號，並且未定義包裝器變量。否則它太棒了！ – Chris

很高興你發現它很有用。感謝您指出錯誤。 – dagge

非常好。爲它做一個演示。它可能對其他人快速檢查結果有用 –

在我的情況下，這個完美工作：

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' 當滾動停止活動。

來源

2016-01-25 12:10:02

有趣的技術，對於某些特定用例，它甚至可能比接受的答案更好（就像我的情況一樣）。 +1 – Mtz

偉大的簡單解決方案，我不得不調整timeOut長度到一個更大的數字雖然 – Arjan

檢測元素是否停止動量滾動？

回答

相關問題