To disable bouncing effect in ios scroll ionic 3

Viewed 12255

I tried some methods to disable bounce effect set no-bounce attribute to ion-content

<ion-content no-bounce></ion-content>

And added styles to ion-content to disable bounce. Still no fix to my problem.

6 Answers

It works on Ionic 4 with this. (Sorry, I don't have an explanation).

<ion-content no-bounce has-bouncing="false" forceOverscroll="false">

After couple of hours, I have find an answer from Github issues and I would like to share the solution, which then will disable the bounce effect in the iOS device.

Steps:

  1. Run command, ionic cordova platform add ios && ionic cordova prepare ios
  2. Then find CDVWKWebViewEngine.m, inside /platforms/ios/<ionic-project>/Plugins/cordova-plugin-ionic-webview/
  3. Put this line of code at the bottom of the lines and save it.
@implementation UIScrollView (NoBounce)
- (void)didMoveToWindow {
   [super didMoveToWindow];
   self.bounces = NO;
}
@end

Credit link: https://github.com/ionic-team/ionic-v3/issues/113

Tested on Ionic 4, working on iOS device

Version: Ionic 5+

There seem to be various ways:

Disable bounce & disable vertical scroll:

<ion-content scrollY="false">

Problems This also disables scroll in general, which is what one might now want.

Disable bounce without disabling scroll:

<ion-content forceOverscroll="false">

This works in my case perfectly, even though the documentation is a bit confusing about this flag.

For ionic 4

<ion-content forceOverscroll="false">

Just using forceOverscroll="false" worked for me, the docs say do the opposite

The only solution which worked with IONIC - V5 is this plugin: https://github.com/mangeshdatar/plugin-disable-ios-bouncing

  • Install the plugin using npm by npm i disable-ios-scrolling.
  • Add disable-ios-scrolling into your plugin section in package.json

As mentioned in the official document forceOverscroll property only works when the page content is shorter than the viewport.

<IonContent forceOverscroll={false}></IonContent>

I solved my problem with this:

<ion-content scrollY="false">
Related