Stop overscroll when using “-webkit-overflow-scrol

问题:

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?

回答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
);

回答2:

This seems to help:

https://github.com/joelambert/ScrollFix

... ScrollFix works around this by manually offsetting the scrollTop value to one away from the limit at either extreme, which causes the browser to use rubber banding rather than passing the event up the DOM tree.