CODEWITHSUNDEEP
angularionic3
Abinesh Joyel
Abinesh Joyel

Reputation: 2093

To disable bouncing effect in ios scroll ionic 3

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.

Upvotes: 15

Views: 14090

Answers (6)

Nikhil
Nikhil

Reputation: 51

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>

Upvotes: 0

Pascal
Pascal

Reputation: 1751

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.

Upvotes: 3

Snowbases
Snowbases

Reputation: 2401

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

Upvotes: 3

Dave Keane
Dave Keane

Reputation: 737

For ionic 4 

<ion-content forceOverscroll="false">

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

Upvotes: 1

Xazar
Xazar

Reputation: 1

I solved my problem with this:

<ion-content scrollY="false">

Upvotes: -2

arc
arc

Reputation: 4691

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

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

Upvotes: 10

Related Questions