15

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.

Abinesh Joyel
  • 2,043
  • 2
  • 13
  • 18
  • 1
    Do you have any update about that problem? I'm in the same issue with no solution. – Felipe Ferreira do Amaral Oct 09 '17 at 17:08
  • Till no solutions. Boucing is a part of the ios features. If we try to disable scrolling it will be choppy that is mentioned by ionic team.. – Abinesh Joyel Oct 10 '17 at 10:44
  • 1
    Man, It works for me. I put no-bounce has-bouncing="false" and my ion-content and it worked. My stupid error was testing only with cordova run ios --device, when I put ionic in front it generate again the project and it works like a charm now. – Felipe Ferreira do Amaral Oct 11 '17 at 15:14
  • 1
    @FelipeFerreiradoAmaral post this as an answer, I followed your comment and it worked for me. – Luiz Eduardo Jun 15 '18 at 14:17
  • @FelipeFerreiradoAmaral sir i have faced same issue bouncing-effect as well scrolling is not working in the iphone7 device as well as screen freezed but in the another iphone list is scrolled do you have any idea sir why list is not scrolled in the iphone7 only? – Kapil Soni Apr 13 '19 at 06:36
  • @Kapilsoni Sorry for that but I don't have an Iphone 7 here for test and unfortunately I can't provide any additional idea about it. – Felipe Ferreira do Amaral Apr 15 '19 at 11:19
  • @FelipeFerreiradoAmaral: its ok sir actually i stuck this issue last 4 days? – Kapil Soni Apr 15 '19 at 13:15
  • Please check this , It should solve your issue – Mangesh55 Feb 29 '20 at 17:38

6 Answers6

10

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

<ion-content no-bounce has-bouncing="false" forceOverscroll="false">
arc
  • 4,553
  • 5
  • 34
  • 43
3

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

Snowbases
  • 2,316
  • 2
  • 20
  • 26
2

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.

Pascal
  • 1,661
  • 17
  • 29
  • 1
    This seems to work on pages where content is shorter than viewport. If content is larger than viewport, bounce still occurs. – MatejZagar May 05 '22 at 12:29
1

For ionic 4 

<ion-content forceOverscroll="false">

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

Dave Keane
  • 729
  • 8
  • 19
0

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>
Nikhil
  • 51
  • 2
  • 9
-1

I solved my problem with this:

<ion-content scrollY="false">
Xazar
  • 1
  • 1