Stopping overscroll / bounce in Phonegap IOS

Question

I am using the latest version of Phonegap on IOS (ipad) and I can't seem to disable the vertical overscroll/bounce on the whole app. I don't mind it on inner elements but it looks rather strange when you swipe up or down and the whole app bounces up and down.

I've tried setting UIWebViewBounce to no in the .plist however that doesn't seem to have done anything.

Appreciate the help :)

score 205 · Accepted Answer · edited Mar 31 '14 at 12:53

205

You have to modify a property in your config.xml file. Just set the following preference to true

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

edited Mar 31 '14 at 12:53

Matthieu Riegler

31,918
20
95
134

answered Apr 29 '13 at 09:00

dpfauwadel

3,866
3
23
40

7

Since Cordova 2.6, UIWebViewBounce has been changed to DisallowOverscroll. http://docs.phonegap.com/en/3.1.0/guide_platforms_ios_upgrading.md.html#Upgrading%20iOS – Reborn Nov 20 '13 at 17:07
where can i find this config.xml in iphone app? – Pulah Nandha Jan 02 '14 at 10:24
1

I found several different config.xml files There is one in the main directory and I change it there. But then when I build the app for iOS two more config.xml files are then created, one in the platforms/ios directory and one in platforms/iOS/www. The one in platforms/ios seems to have a lot more stuff then the one that I was editing in my main directory (including the preference for disallowing overscroll). – Chase Roberts Jan 03 '14 at 19:23
Adding this setting to the config.xml in my main project folder fixed it for me in iOS8. – bsegraves Jul 25 '14 at 01:57
@ChaseRoberts, config.xml from root folder is for Cordova CLI, and config.xml from www is for Adobe Phonegap Build. – andreszs Feb 01 '15 at 14:35
4

For anyone arriving late to the party: just wanted to confirm this works for CLI-6.5.0 and iOS 10 – robro Jul 27 '17 at 19:56
I want to confirm that it does NOT work on CLI-6.5.0 and WP8 Windows-Universal platform. Overscroll persists as usual. – andreszs Sep 15 '17 at 00:58
1

This is working fine for cordova 7.1.0 and ios 11. Remember in ios project there are two config.xml . Modify both of them correctly to get this working. – Ankit J Dec 11 '17 at 07:17
@AnkitJ What do you mean in ios projects there are two config.xml files? Shouldn't there just be one for both android and ios using cordova? – Joshua Jan 19 '18 at 12:05
@Josh Just change the only one config.xml. – Halt Jul 16 '18 at 08:54

Yangshun Tay · Answer 2 · 2017-06-05T05:19:33.017

21

The accepted answer did not work for me, I had to set UIWebViewBounce to false:

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

edited Jun 05 '17 at 05:19

answered Jun 15 '13 at 06:21

Yangshun Tay

49,270
33
114
141

I'm using version 3.4 of cordova so it didn't work. But this did the job: http://stackoverflow.com/questions/22294677/phonegappreventing-bounce-only-in-the-main-window – Telmo Dias May 15 '14 at 10:37
`UIWebViewBounce` has been renamed to `DisallowOverscroll` and the value has been inverted, yet as of CLI 6.5.0 it does not work for Windows Universal (WP8) apps. – andreszs Sep 15 '17 at 00:59

score 15 · Answer 3 · answered Dec 23 '13 at 07:41

15

now for phonegap 3.0 above version use below syntex in config.xml file and it will works 100%

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

answered Dec 23 '13 at 07:41

Mayur

503
1
6
17

This answer worked fine for me on Cordova 6.1.1. @Mr.TA must have some other issue. – raider33 Jul 06 '16 at 22:21
This still does not work on WP8 Windows Universal apps with CLI 6.5.0. – andreszs Sep 15 '17 at 01:01
Idk about Windows universal apps, but this worked for me with Cordova CLI 6.5.0, and cordova ios engine 4.5.1 – Norman Breau Nov 03 '17 at 19:07

score 6 · Answer 4 · answered Jan 04 '14 at 21:18

6

If you're adding <preference name="DisallowOverscroll" value="true"/> to config.xml without any luck, you may be changing the wrong file. Instead, search the entire phonegap directory for "DisallowOverscroll." You should find several instances. Change those to true.

Cheers.

answered Jan 04 '14 at 21:18

Jerad

594
7
15

I didn't find any other instances of this other than the lines in config.xml that I myself added. – Mr. TA Jun 19 '16 at 01:54

score 5 · Answer 5 · answered May 02 '14 at 05:35

5

In config.xml of your project, under preferences for iOS set DisallowOverscroll to true. By default it is false which makes whole view to scroll along with inner elements of the view.

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

answered May 02 '14 at 05:35

user3085992

163
1
11

score 4 · Answer 6 · answered Mar 28 '15 at 22:49

4

If nothing else works, try to remove -webkit-overflow-scrolling: touch from your css...if you had it!

answered Mar 28 '15 at 22:49

dom

211
2
4

2

The problem is that also disables velocity scrolling. – Mr. TA Jun 19 '16 at 01:53
Yah, I've been trying to solve this problem for awhile and I basically came to the conclusion that it isn't possible to disable over-scrolling bounce without also disabling velocity scrolling, without mimicking velocity in javascript. – Norman Breau Apr 04 '17 at 13:28

score 4 · Answer 7 · answered Jan 12 '16 at 10:49

Use this way:-

function disallowOverscroll(){
  $(document).on('touchmove',function(e){
    e.preventDefault();
  });
  $('body').on('touchstart','.scrollable',function(e) {
    if (e.currentTarget.scrollTop === 0) {
      e.currentTarget.scrollTop = 1;
    } else if (e.currentTarget.scrollHeight
              === e.currentTarget.scrollTop
                  + e.currentTarget.offsetHeight) {
      e.currentTarget.scrollTop -= 1;
    }
  });
  $('body').on('touchmove','.scrollable',function(e) {
    e.stopPropagation();
  });
}
disallowOverscroll();

For more details or Tips & Tricks, please read this article click

score 3 · Answer 8 · answered Jun 13 '14 at 16:28

3

In config.xml of your project, under preferences for iOS set DisallowOverscroll to true.

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

answered Jun 13 '14 at 16:28

PRBEHERA8

31
5

score 3 · Answer 9 · answered Jun 16 '14 at 09:42

3

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 this'll work in any phonegap/cordova distribution.

answered Jun 16 '14 at 09:42

Asanka Indrajith

353
3
13

Have you tested this code? It has nothing to so with Cordova at all. – Gregory Magarshak Jun 13 '17 at 17:16
Yes. You are right. It's objective c code. I used this because every time cordova changes I had to modify code or settings. This way I don't have to. – Asanka Indrajith Jan 24 '18 at 04:32

score 3 · Answer 10 · answered Jun 09 '15 at 07:48

Thanks For All answer. But If you have issue in windows Phone here is the solution. Just go to MainPage.xaml.cs file and replace below function..

public MainPage()
    {
        InitializeComponent();
        this.CordovaView.DisableBouncyScrolling = true;
        this.CordovaView.Loaded += CordovaView_Loaded;
    }

Its works for me :)

Hanho Kim · Answer 11 · 2016-08-27T09:08:42.487

2

I had a similar issue, but couldn't fix it with all solutions I found so far (like editing config.xml).

But finally, simply editing the body's CSS property then it fixed:

html,body
{
  overflow: auto;
  height:100%;
}

edited Aug 27 '16 at 09:08

answered Jul 27 '16 at 04:13

Hanho Kim

61
3

it changed scroll event bind to 'document.body' not 'window'. – Hanho Kim Aug 02 '16 at 06:22

score 2 · Answer 12 · edited Nov 18 '16 at 09:33

2

Try This One If you are ionic framework user Abc.html file inside content.

<ion-content has-bouncing="false">

edited Nov 18 '16 at 09:33

Devid Farinelli

7,514
9
42
73

answered Aug 05 '16 at 11:57

KAUSHAL J. SATHWARA

994
9
15

score 1 · Answer 13 · answered Jun 15 '13 at 06:26

1

Use this:

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

answered Jun 15 '13 at 06:26

squall leonhart

21
2

score 1 · Answer 14 · answered Oct 10 '13 at 10:35

1

this is what worked for my app running phonegap 3.0: add the following line to config.xml

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

answered Oct 10 '13 at 10:35

tschueggi

49
3

score 1 · Answer 15 · edited Nov 18 '16 at 09:33

1

This worked for me. Try adding this code in config.xml file of your phonegap app:

<preference name="DisallowOverscroll" value="true">

edited Nov 18 '16 at 09:33

Devid Farinelli

7,514
9
42
73

answered Sep 12 '14 at 07:04

Akshay Khale

8,151
8
50
58

1

You wrote this comment in every answer – Gregory Magarshak Jun 13 '17 at 17:15
So WHAT DOES WORK?? – Gregory Magarshak Jun 13 '17 at 17:15
if (!self.webView) { [self createGapView]; webView.delegate = self; webView.scalesPageToFit = YES; [[webView scrollView] setBounces:NO]; } – Gregory Magarshak Jun 13 '17 at 17:15

score 1 · Answer 16 · answered Dec 24 '15 at 04:45

1

It is better to modify two elements in config.xml as follows:

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

answered Dec 24 '15 at 04:45

Nakket

620
7
18

score 1 · Answer 17 · answered Feb 01 '18 at 22:30

For Cordova 7 and an iPhone 7 + iOS 11.0.3, modifying the root-directory config.xml and adding this worked beautifully:

<platform name="ios">
    <preference name="DisallowOverscroll" value="true" />
    <preference name="UIWebViewBounce" value="false" />
    ... (other stuff) ...
</platform>

score 0 · Answer 18 · answered Sep 06 '17 at 06:06

0

Open xCode -> find and click on config.xml from left menu-> and change DisallowOverscroll value false to true Or use this code by replacing previous.

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

answered Sep 06 '17 at 06:06

Somnath

368
2
9
22

score 0 · Answer 19 · answered Apr 25 '18 at 15:18

0

After update the the config.xml I had not luck, if that is your case try this.

For iOS works on iPhone + iOS 11, on CDVThemeableBrowser.m file, set property as YES:

self.disallowoverscroll = YES;

answered Apr 25 '18 at 15:18

user2414596

1

score 0 · Answer 20 · answered Dec 18 '19 at 16:04

DisallowOverscroll does not work for me.

Solution is to ensure that there is nowhere to scroll.

For example, in my case it was div wider (it can be higher) than the body like below:

<body>
  <div style="margin: 5%" width: 95%;>something</div>
</div>

Now, above div is 5% bigger than body that cause scrolling. Set width to 90% fixes the issue.

Stopping overscroll / bounce in Phonegap IOS

20 Answers20

Linked