Stopping overscroll / bounce in Phonegap IOS

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

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

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

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

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

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

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

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.

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" />

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

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

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

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

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.

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

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%;
}

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

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

Use this:

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

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

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

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

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

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

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

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" />

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>

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;

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.