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"/>

回答1:

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

overflow-scroll="false"

Works on Ionic 1.3

回答2:

Solution for Ionic 2:

<ion-content no-bounce>

回答3:

For Ionic 4, use:

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

回答4:

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.

回答5:

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.

回答6:

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

回答7:

You can use

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

add it in the scss file.

回答8:

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>"}

来源：https://stackoverflow.com/questions/35555096/disable-content-bouncing-scroll

标签

ios

ionic-framework