CODEWITHSUNDEEP
iosionic-framework
Greg
Greg

Reputation: 1402

Disable content bouncing scroll

In my hybrid app there's a possibility to drag the screen to refresh the list. In Android this works fine, but on iOS when I'm dragging down it sometimes confuses it with scrolling the page so it has that overflow/bouncing effect.

In ionic there's an attribute you can use to disable this, but it's not working:

<ion-content id="questions" has-bouncing="false">

config.xml already has these lines of code:

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

Upvotes: 7

Views: 18886

Answers (10)

Kapil Soni
Kapil Soni

Reputation: 1051

Below solution worked for me : Tested only ionic 3.9 version

Run command,

  1. ionic cordova platform add ios && ionic cordova prepare ios
  2. Then find CDVWKWebViewEngine.m, inside /platforms/ios//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

Upvotes: 3

Frank
Frank

Reputation: 1285

I'm upgrading from Ionic 3 to Ionic 5 and found this post. But then just found the solution in documentation.
I'm using Ionic 5 (not sure if Ionic 4 works too). Just add slot="fixed" to element inside ion-conent:

<ion-content
  [scrollEvents]="true"
  (ionScrollStart)="logScrollStart()"
  (ionScroll)="logScrolling($event)"
  (ionScrollEnd)="logScrollEnd()">
    <h1>Main Content</h1>

    <div slot="fixed">
      <h1>Fixed Content</h1>
    </div>
</ion-content>

It works perfect in iOS.
Source: https://ionicframework.com/docs/api/content

Upvotes: 0

Mangesh55
Mangesh55

Reputation: 31

I guess the answer from Leonardo Pineda is right , But It's not good way to update directly into native file instead We should go for create custom plugin which will disable bouncing on iOS.

Step 1. Clone the plugin from github repo (https://github.com/dtrmangesh/plugin-disable-ios-bouncing).

Step 2. Add repository path into your package.json 

"dependencies": { BouncingIos : "git+<https://github.com/dtrmangesh/plugin-disable-ios-bouncing>"}

Upvotes: 0

Leonardo Pineda
Leonardo Pineda

Reputation: 1028

on ionic 4 <ion-content no-bounce has-bouncing="false" forceOverscroll="false">. If this fail force to remove bounce with.

To remove and force the not bounce in the component ion-content on ios, create the file DisableBounce.m With the following content.

#import <Foundation/Foundation.h>
#import <UIKit/UIKit.h>

@implementation UIScrollView (NoBounce)
- (void)didMoveToWindow {
    [super didMoveToWindow];
    self.bounces = NO;
}
@end

and to save on platforms/ios/CordovaLib/Classes/Private/Plugins/CDVUIWebViewEngine. this disable all efect bounce in you app.

Upvotes: 6

radioaktiv
radioaktiv

Reputation: 2539

You will need to set overflow-scroll to false like :

overflow-scroll="false"

Works on Ionic 1.3

Upvotes: 7

Vinicius Maia
Vinicius Maia

Reputation: 124

For Ionic 4, use:

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

Upvotes: 5

Ankit Pant
Ankit Pant

Reputation: 355

You can use

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

add it in the scss file.

Upvotes: 1

Lentyai
Lentyai

Reputation: 986

I'm using ionic 1.3.2 and the following worked for me:

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

All this with has-bouncing="false" on each ion-content. I didn't make a thorough test to check the minimum requirements that will do the job. Yet the outcome: no bouncing in iOS and android.

Hope it helps someone.

Upvotes: 3

Luckylooke
Luckylooke

Reputation: 4539

overflow-scroll="false" nor no-bounce nor has-bouncing="false" has effect.. I was trying clean ionic project ionic conference and applied mentioned attributes to ion-content at speakers list page.. bouncing of scroll has not been disabled

cli packages: (/Users/lucky/Documents/projects/ionic-conference/node_modules)

@ionic/cli-utils  : 1.9.2
ionic (Ionic CLI) : 3.9.2

global packages:

Cordova CLI : 7.0.1

local packages:

@ionic/app-scripts : 2.1.4
Cordova Platforms  : android 6.2.3 ios 4.3.1
Ionic Framework    : ionic-angular 3.6.1

System:

ios-deploy : 1.9.1 
ios-sim    : 6.0.0 
Node       : v6.9.5
npm        : 5.4.0 
OS         : macOS Sierra
Xcode      : Xcode 8.3.3 Build version 8E3004b

Tested with xcode simulator iPhone 6 Plus

Upvotes: 1

Goalie Long
Goalie Long

Reputation: 198

Solution for Ionic 2: 

<ion-content no-bounce>

Upvotes: 20

Related Questions