[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

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).