Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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?

like image 343
user1219278 Avatar asked Nov 26 '22 10:11

user1219278


1 Answers

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.

like image 51
philfreo Avatar answered Nov 29 '22 03:11

philfreo