[PhoneGap]preventing bounce ONLY in the main Window

Question

I am now using the latest version of PhoneGap (3.4) and iOS7.1 beta3, and i find the body (maybe call UI View element) have a bad property of bounce just like the pic below, and i want to disable it. I tried to search on the website, and i find only
<preference name="DisallowOverscroll" value="false" />
works for me, BUT i find this preference make bounce disabled in all elements in my App, and i just want to disable the body`s bounce just like the pic below, and keep bounce in div elements.

Is there any way to solve this issue out?

Answer 1

There is a way I used to achieve this. but it's not conventional because it's dealing with native coding. In the MainViewController there is a method named webViewDidFinishLoad. Include this
theWebView.scrollView.bounces= NO;

inside that method.

- (void)webViewDidFinishLoad:(UIWebView*)theWebView
{
    // Black base color for background matches the native apps
    theWebView.backgroundColor = [UIColor blackColor];
    theWebView.scrollView.bounces= NO;
    return [super webViewDidFinishLoad:theWebView];
}

As this is ios native code, so this'll work in any phonegap/cordova distribution.

Answer 2

You need both of these preferences in your config.xml file:

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

You can then enable iOS-native-style scrolling on nested containers with:

.scrollingArea
{
  width: 100%;
  height: (some-fixed-height);
  overflow: hidden;
  overflow-y: scroll !important;
  -webkit-overflow-scrolling: touch;
}

You may also find it useful to capture and block the touchmove' event on certain elements that you don't wish to be user-scrollable (depending on your layout).