force-stop momentum scrolling on iphone/ipad in javascript

javascript iphone mobile infinite-scroll momentum
Geert-Jan picture Geert-Jan · Apr 19, 2013 · Viewed 7.3k times · Source

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?

Answer

Patrick Rudolph picture Patrick Rudolph · Feb 5, 2014

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.

Related questions

How to check browser for touchstart support using JS/jQuery?

In an attempt to follow best practices, we're trying to use the proper JavaScript/jQuery events according to what device you are using. For example, we're building a mobile site that has an tag that will have an onclick or …

Read More
What is the best method of re-rendering a web page on orientation change?

I have a fluid CSS layout which is rendering badly on an iphone when I change the orientation. (It looks fine when it is refreshed). I am using the code below to refresh the page on orientation change, which works …

Read More
How to fix jQuery Mobile's fixed footer?

Using jQueryMobile, I've included data-role="footer" data-position="fixed" in the markup, but two bugs persist: Footer toggles on a null click event. Footer isn't fixed, and hides some of the page content. I'm testing with iPhone 3g. Any ideas? Thanks …

Read More