CODEWITHSUNDEEP
cordovaionic-frameworkionic3
Chris Hansen
Chris Hansen

Reputation: 335

Ionic 3 disable scroll bounce effect on iOS

So I've been maintaining this app for quite some time. It works on Android just how I want it, because Android doesn't add the stupid bounce effect without your permission. I still want content to scroll, just without the bounce effect because it totally breaks my view when it does the bounce effect on iOS.

A year or two ago when I started this app I managed to get rid of the scroll bouncing effect using this in my config.xml:

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

But that doesn't seem to be working anymore. I haven't touched this project for the last few months so I'm not sure what has changed in Ionic since then. Are there any other ways to disable content bounce?

Edit: I've already tried the has-bouncing="false" and no-bounce properties on my ion-content, which don't do anything.

Upvotes: 1

Views: 4880

Answers (4)

Mangesh55
Mangesh55

Reputation: 31

I know for iOS devices has different scrolling behaviour , and whatever you add in ionic it wont works , So but that need to do something else.

Here is my library fo removing bouncing effects on iOS.

https://www.npmjs.com/package/disable-ios-scrolling

Upvotes: 1

Eray T
Eray T

Reputation: 777

try this:

<ion-content [scrollY]="false" [scrollX]="false">/<ion-content>

Change it according to your needs.

Upvotes: 2

Chris Hansen
Chris Hansen

Reputation: 335

Well, I did find a solution but it doesn't only stop the bounce, it also disables smooth scrolling. At this point I don't even care, I'm just glad it's working now.

.ios {
  .scroll-content {
    -webkit-overflow-scrolling: auto !important;
  }
}

Upvotes: 3

Troy Myers
Troy Myers

Reputation: 520

You can use a no-bounce tag on your ion-content like so:

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

Upvotes: 1

Related Questions