javascriptjqueryiosscrollmomentum

iOS: -webkit-overflow-scrolling:touch and scrollTop

I have some trouble when trying to back to the top of a list.

I put -webkit-overflow-scrolling:touch on the list to get momentum scroll. However when I'm using jQuery scrollTop(); while the momentum scroll is still going, it jumps to the top but it doesn't stop the momentum. So it keeps going down again until the momentum ends.

Is there an easy way to stop momentum scroll?

Solution

  • Set your list's -webkit-overflow-scrolling style to 'auto' and then back to 'touch' after a short timeout.

    i.e.

    let scrollContainer = document.getElementById('yourListId');

scrollContainer.style['-webkit-overflow-scrolling'] = 'auto';  // stop scroll

setTimeout(function() {
       scrollContainer.scrollTop = 0;  // or jQuery scrollTop()
       scrollContainer.style['-webkit-overflow-scrolling'] = 'touch'; // re-enable
}, 2);

    Reference: this SO answer. (modified their implementation to get rid of scrollbar redraw jerkiness on desktop browsers)