Stop overscroll when using "-webkit-overflow-scrolling: touch"?

Question

I've found the:

-webkit-overflow-scrolling: touch;

css element to give us native scrolling on ios. This seems to work ok for me.

But is there a way to turn off the "overscroll" effect?

For example, when scroll position = zero, and you keep dragging downwards, the top of my content will move downwards revealing a little bit of white space above it. When you release your finger, the content snaps back upwards. Is there a way to disable just that portion of it?

Also I read from here:

http://cantina.co/2012/03/06/ios-5-native-scrolling-grins-and-gothcas/

that apple had introduced this with a bug related to rendering, and a hack fix of:

-webkit-transform: translate3d(0,0,0);

is supposed to fix it. Was that fixed with ios6?

Answer 1

Have you tried the techniques in this blog post about turning off elastic scrolling? Specifically, for iOS it suggests the following JavaScript:

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