force-stop momentum scrolling on iphone/ipad in javascript

Question

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?

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, Apr 19 '13 at 16:46
If I got your question right I think I answered it here: [Programatically halt -webkit-overflow-scrolling](http://stackoverflow.com/questions/14770891/programatically-halt-webkit-overflow-scrolling/14771980#14771980) — insertusernamehere, Apr 19 '13 at 16:49
OK guys thanks.Trying how realiable it is to get the last `dy` and go from there. — Geert-Jan, Apr 19 '13 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, Apr 19 '13 at 17:11

score 10 · Answer 1 · answered Feb 05 '14 at 14:27

10

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.

answered Feb 05 '14 at 14:27

Patrick Rudolph

2,133
13
30

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 Nov 25 '14 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` – Alexei Darmin Dec 29 '16 at 04:21
Setting `overflow: hidden` will make scroll in UI unresponsive. – Haslo Vardos Oct 14 '19 at 09:41

score 0 · Answer 2 · answered Jan 28 '16 at 17:47

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

Yuriy Polezhayev · Answer 3 · 2019-11-18T14:33:34.777

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

force-stop momentum scrolling on iphone/ipad in javascript

3 Answers3

Linked