[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?

Ade · Answer 1 · 2014-03-13T09:26:39.310

22

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

edited Mar 13 '14 at 09:26

answered Mar 12 '14 at 00:13

Ade

2,961
4
30
47

thank you for your answing, and i tried, but the UI seems not native enough... maybe i should really use iscroll.. but anyway thank you – Dicky Tsang Mar 12 '14 at 18:10
@DickyTsang I've amended my answer. You need a couple of preferences. – Ade Mar 13 '14 at 09:23
1

Hmm, with PhoneGap 3.5.0 and iOS 7.1.2, I am having no luck with this at all :/ – markj Sep 27 '14 at 16:29
Worked on Cordova v5.7 ios , Thanks dude ;) – Ali Esmaeili Mar 06 '16 at 21:49
The preference settings in config.xml seem to have no effects in Cordova 6.3.1 – bardu Sep 12 '16 at 14:41

score 5 · Accepted Answer · answered Jun 16 '14 at 09:58

5

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.

answered Jun 16 '14 at 09:58

Asanka Indrajith

353
3
13

.. @Mr.TA if this solution is not working, what would it be the solution? – inane Jan 17 '17 at 12:34
It does work. It has nothing to do with Cordova version since it is native code. – Gregory Magarshak Jun 13 '17 at 17:17

[PhoneGap]preventing bounce ONLY in the main Window

2 Answers2

Linked