Is it possible to force-stop momentum scrolling on iphone/ipad in javascript?

Extra: pretty sure this is pie in the sky, but for bonuspoints (honor and kudos), after dom-manipulation and a scrollTo applied, resume scroll with the same momentum before the forced stop. How to?

Is it possible to force-stop momentum scrolling on iphone/ipad in javascript?

Extra: pretty sure this is pie in the sky, but for bonuspoints (honor and kudos), after dom-manipulation and a scrollTo applied, resume scroll with the same momentum before the forced stop. How to?

• javascript
• iphone
• mobile
• infinite-scroll
• momentum

• 2 Have you tried setting the scroll position and disabling overflow on the body/html? Resuming the scroll could also be possible, look at the scroll events prior to stopping and calculate your dy. You will need to get a good estimate for a value of the friction though (how quickly it slows down). – Halcyon Commented Apr 19, 2013 at 16:46
• If I got your question right I think I answered it here: Programatically halt -webkit-overflow-scrolling – insertusernamehere Commented Apr 19, 2013 at 16:49
• OK guys thanks.Trying how realiable it is to get the last dy and go from there. – Geert-Jan Commented Apr 19, 2013 at 17:04
• yeah so indeed as @insertusernamehere suggested scrolltop is only available after scroll has stopped. I need this as indicator to start with to forcestop the scroller, so it doesn't seem possible. hmm. Thanks anyhow! – Geert-Jan Commented Apr 19, 2013 at 17:11

3 Answers 3

This is actually very possible when using fastclick.js. The lib removes the 300ms click delay on mobile devices and enables event capturing during inertia/momentum scrolling.

After including fastclick and attaching it to the body element, my code to stop scrolling and go to the top looks like this:

scrollElement.style.overflow = 'hidden';
scrollElement.scrollTop = 0;
setTimeout(function() {
  scrollElement.style.overflow = '';
}, 10);

The trick is to set overflow: hidden, which stops the inertia/momentum scrolling. Please see my fiddle for a full implementation of stop scrolling during inertia/momentum.

Here is my code using jQuery animation (running as onclick event)

var obj=$('html, body'); // your element

if(!obj.is(':animated')) {

    obj.css('overflow', 'hidden').animate({ scrollTop: 0 }, function(){ obj.css('overflow', ''); });

}

Tested on iPhone 6

I have found a way to CANCEL the BODY momentum scrolling by assigning the html.scrollTop property on touchend event. Looks like this:

let html = document.querySelector('html');
window.addEventListener( 'touchend', function( e ){
    html.scrollTop = html.scrollTop;
});

Tested on iOS 13

UPD: The above solution fails on iOS 12, because the actual scrolling element is not "html" in this version.

The below code works for Both 12 & 13:

window.addEventListener( 'touchend', function( e ){
    window.scroll( 0, window.scrollY );
});