This is how you disable bouncing (rubberband effect) properly in your app on iOS

[Geuis]

This post is to share some information about a common question.

Lots of people (myself included) frequently find that we want to
disable the bouncing effect in the UIWebView that loads our apps. To
be clear, what we're talking about is when the user drags down or up
and you see a kind of grey area beyond the edge of the page.

The most common answer to this is to catch the "touchmove" event and
perform a "event.preventDefault()".

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

Now, this does of course work. But it introduces lots of other
problems. For example, in my app I want to still be able to scroll
vertically. To do that, I then have to use crazy javascript and css
tricks to re-simulate the behavior that's already built into iOS.
That's insane!

There's some javascript libraries out there like iScroll that are
useful to simulate fixed positioning, but that's a lot of overkill for
simply wanting to be able to get rid of bouncing.

Ok, so here's what I did and it works for me. Hopefully it will work
to you.

1) Open your project in Xcode. Under the Classes folder, find the
"<your app name>AppDelegate.m" file.
2) Edit that file. Now find the function that is "-
(void)webViewDidFinishLoad:(UIWebView *)theWebView"
3) Add the following code between the (void) line and the "return"
statement.

for (id subview in theWebView.subviews){
if ([[subview class] isSubclassOfClass: [UIScrollView class]])
((UIScrollView *)subview).bounces = NO;
}

That's it!

Now I'm not very good with Objective-C just yet, so there might be
better ways to do this. If you know of any, please reply to this post
with your suggestions so that future developers can consider this
solution too.

Finally, I really feel that disabling bouncing should be a feature
that's built right into PhoneGap. Ideally it would be a property that
is configurable in PhoneGap.plist or <your app name>-Info.plist.

Hope this helps!

[avoision]

Haven't tried this yet, but it's something I was wondering about. Just
wanted to drop a note to say thanks for actively sharing what you've
discovered.

[Kliment]

I just tried this approach and it works beautifully.

[jheid]

Sadly, it also disables the -webkit-overflow-scrolling: touch;

[Kerri Shotts]

It /is/ part of your plist or config.xml. At least there is if I'm understanding your issue correctly. 

See http://docs.phonegap.com/en/2.5.0/guide_project-settings_ios_index.md.html#Project%20Settings%20for%20iOS

Specifically UIWebViewBounce, which defaults to true and allows the bounce behaviour. 

Change it to false, and the problem goes away. (Why this is true by default is odd -- I'm

Sure there's a good reason for it, but it is the first thing I change in my app.)

___________________________________

Kerri Shotts

photoKandy Studios, LLC

On the Web: http://www.photokandy.com/

Social Media:

          Twitter: @photokandy, http://twitter.com/photokandy

          Tumblr: http://photokandy.tumblr.com/

          Github: https://github.com/kerrishotts

                        https://github.com/organizations/photokandyStudios

          CoderWall: https://coderwall.com/kerrishotts

Apps on the Apple Store:

          https://itunes.apple.com/us/artist/photokandy-studios-llc/id498577828

On Mar 1, 2013, at 16:56, Jake Bown <invisso...@gmail.com> wrote:

You absolute legend! I've been looking for this for weeks!

--
-- You received this message because you are subscribed to the Google
Groups "phonegap" group.
To post to this group, send email to phon...@googlegroups.com
To unsubscribe from this group, send email to
phonegap+u...@googlegroups.com
For more options, visit this group at
http://groups.google.com/group/phonegap?hl=en?hl=en
 
For more info on PhoneGap or to download the code go to www.phonegap.com
 
To compile in the cloud, check out build.phonegap.com
---
You received this message because you are subscribed to the Google Groups "phonegap" group.
To unsubscribe from this group and stop receiving emails from it, send an email to phonegap+u...@googlegroups.com.
For more options, visit https://groups.google.com/groups/opt_out.
 
 

[Shazron]

"Various preferences (as <preference> tags) default on not breaking existing apps."

[tschueggi]

with phonegap version 3 the preference is now:

<preference name="webviewbounce" value="false"/>

searched the whole internet twice to get rid of the bouncing effect

[jcesarmobile]

for phonegap 3 you should use

<preference name="allowoverscroll" value="false"/>

Even if this worked, if might stop working in the future

<preference name="webviewbounce" value="false"/>