11

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?

4
  • 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 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

13

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.

4
  • 5
    Resetting the overflow to hidden, then back to auto or scroll is a solid solution without using fastclick.js. Just don't forget the timeout!
    – abriggs
    Commented Nov 25, 2014 at 16:15
  • This is the first answer I've found that's simple and works cross-browser. Note that timeOut cannot be set to 0 Commented Dec 29, 2016 at 4:21
  • Setting overflow: hidden will make scroll in UI unresponsive. Commented Oct 14, 2019 at 9:41
  • I figured this out except without fastclick.js. Problem is I'm trying to scroll to a certain position and cancel the momentum, and this way prevents the scroll from animating, which makes sense.
    – sudo
    Commented Sep 24, 2022 at 23:46
1

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

0

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.