Question

I’m curious if anyone has found a solution to disabling the default spring-loaded iOS page move when a user drags their finger across the page. For pages that are completely visible (i.e., no scrolling is necessary) the page moves and springs back into place.

I’ve found that disabling the “touchstart” will effectively fix this, but then it breaks all click events!?! For example:

document.addEventListener('touchstart', function(e) {
    e.preventDefault();
}, false);

I’ve tried other touch / mouse events but no luck. I’m guessing someone out there knows a secret webkit CSS or JavaScript property which can disable this feature.

Edit: as an example of what I’m looking for, here is a similar answer for disabling other default iOS Webkit behaviors via CSS. Unfortunately these don’t seem to apply to my question:

Prevent default Press but not default Drag in iOS MobileSafari?

Answer 1

I could have sworn I tried this, but it appears “touchmove” does the trick?

document.addEventListener('touchmove', function(e) {
    e.preventDefault();
}, false);

Update: After more testing, yes this does in fact do the trick. It seems as though one should never e.preventDefault() on ‘touchstart’ as that also prevents all other mouse events that follow.