Ionic 4.0.1 - Remove iOS scroll "bounce"

Ionic Framework ionic-v3
1

I’m writing an app for both iOS and Android.

On Android, when the user reaches the bottom of the page, the scrolling stops. On iOS, when the user reaches the bottom of the page it “bounces” past the end of the page and shows a white background. I don’t want it to do this - the background of my page is dark grey, and this overscroll looks terrible.

I’ve already added the following three lines to the config.xml file:

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

But they don’t have any effect.

What else can I do to prevent this over-scroll, “bounce” effect?

1 Like
2

I don’t know how to remove the bounce, but why don’t you change the color of the background from white to the color of your app?

1 Like
3

I’ve got two problems with that:

  1. I can’t seem to set any background-color or background-image for the <ion-content> element, so I’m stuck using a <div> just inside the <ion-content> element to wrap my page contents and set the background.
  2. My background is a gradient set at an angle, so the bottom edge is also a gradient. Setting a solid color background wouldn’t look as seamless as I’m looking for.
4

Did you manage to solve it? I’m currently under the same circumstance.

5

Yeah me too. Any solutions?

6

Unfortunately I found this, I really tried fighting against it.
I quote from documentation

forceOverscroll
Description
If true and the content does not cause an overflow scroll, the scroll interaction will cause a bounce. If the content exceeds the bounds of ionContent, nothing will change. Note, the does not disable the system bounce on iOS. That is an OS level setting.

You can find that here:

2 Likes
7

I ended up using forceOverscroll too.

8

Run command,

ionic cordova platform add ios && ionic cordova prepare ios
Then find CDVWKWebViewEngine.m, inside /platforms/ios//Plugins/cordova-plugin-ionic-webview/
Put this lines of code at the bottom of the lines and save it.

@implementation UIScrollView (NoBounce)

  • (void)didMoveToWindow {
    [super didMoveToWindow];
    self.bounces = NO;
    }
    @end

ref: ios - Disable content bouncing scroll - Stack Overflow

1 Like