CODEWITHSUNDEEP
cordova
Josh Undefined
Josh Undefined

Reputation: 1536

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

Upvotes: 60

Views: 65577

Answers (20)

Yuriy N.
Yuriy N.

Reputation: 6087

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.

Upvotes: 0

user2414596
user2414596

Reputation: 1

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;

Upvotes: 0

codeHot
codeHot

Reputation: 471

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>

Upvotes: 1

Somnath
Somnath

Reputation: 406

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

Upvotes: 0

Yangshun Tay
Yangshun Tay

Reputation: 53159

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

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

Upvotes: 21

Akshay Khale
Akshay Khale

Reputation: 8371

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

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

Upvotes: 1

KAUSHAL J. SATHWARA
KAUSHAL J. SATHWARA

Reputation: 994

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

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

Upvotes: 2

Hanho Kim
Hanho Kim

Reputation: 91

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

Upvotes: 2

vineet
vineet

Reputation: 14236

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

Upvotes: 4

Nakket
Nakket

Reputation: 620

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

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

Upvotes: 1

Mayur
Mayur

Reputation: 503

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

Upvotes: 3

dom
dom

Reputation: 211

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

Upvotes: 4

Asanka Indrajith
Asanka Indrajith

Reputation: 353

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.

Upvotes: 3

PRBEHERA8
PRBEHERA8

Reputation: 31

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

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

Upvotes: 3

user3085992
user3085992

Reputation: 163

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

Upvotes: 5

dpfauwadel
dpfauwadel

Reputation: 3934

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

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

Upvotes: 205

Jerad
Jerad

Reputation: 603

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.

Upvotes: 6

Mayur
Mayur

Reputation: 503

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

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

Upvotes: 15

tschueggi
tschueggi

Reputation: 49

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

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

Upvotes: 1

squall leonhart
squall leonhart

Reputation: 21

Use this:

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

Upvotes: 1

Related Questions