Capacitor: [1.0.0-beta.17][iOS] The scroll bouncing behavior is still enabled

Created on 27 Jan 2019 · 7Comments · Source: ionic-team/capacitor

Hi,

To follow up my question posted in December on Slack: the bouncing is present when scrolling.

I would like to disable this behavior but I don't understand how I can proceed... It seems already disabled in the Capacitor settings:
https://github.com/ionic-team/capacitor/blob/master/ios/Capacitor/Capacitor/CAPBridgeViewController.swift#L49

I was also hoping on a hack on Ionic side, but it's precised in its documentation (https://github.com/ionic-team/ionic/tree/2c37a5a7b279da9f82b377d54b27ba2a8391eaed/core/src/components/content#forceoverscroll) that: Note, the does not disable the system bounce on iOS. That is an OS level setting.

To reproduce the behavior you just need to have a content in

  span hey
  br
  br
  br
  br
  br
  br
  br
  br
  br
  br
  br
  br
  br
  br
  br
  span hey
  br
  br
  br
  br
  br
  br
  ...
  br
  br
  br
  br
  br
  span hey
  br
  br
  br
  br
  br
  br
  br
  br
  br
  br
  br
  br
  br
  br
  br

Thank you,

EDIT: by the way, since I'm not seeing any people posting a related issue, maybe I'm doing wrong. If someone has the bouncing disabled, please share a code example 👍

Source

sneko

Most helpful comment

If you want to disable bouncing in ios you need to add somewhere (e.g. create DisableBounce.m file) following code:

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

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

Additionally, if you use ionic 4, for each ion-content you should set force-overscroll=false.

MarkChrisLevy on 30 Jan 2019

❤7 👍5 🎉3

All 7 comments

I can't reproduce. On a regular app without framework it doesn't bounce.
In an Ionic app it bounces, but just the ion-content content, not the header, so I think that's ion-content behaviour and you can probably configure it to not bounce.
If using a different framework, same thing, should be framework related.

jcesarmobile on 28 Jan 2019

As you noticed the ion-header and ion-footer are sticked properly without bouncing.

About ion-content I already tried with force-overscroll="false" but it does not change anything. I will post an issue over their repo.

Note: didn't try for now with another framework or with just vanilla JS

sneko on 30 Jan 2019

Same issue.

gesrt on 30 Jan 2019

Can any of you provide a sample app?

@sneko to be clear, what bounces is the ion-content?

jcesarmobile on 30 Jan 2019

If you want to disable bouncing in ios you need to add somewhere (e.g. create DisableBounce.m file) following code:

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

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

Additionally, if you use ionic 4, for each ion-content you should set force-overscroll=false.

MarkChrisLevy on 30 Jan 2019

❤7 👍5 🎉3

Such a good news haha! It works!

Thank you @MarkChrisLevy 👍

BTW, any idea why https://github.com/ionic-team/capacitor/blob/master/ios/Capacitor/Capacitor/CAPBridgeViewController.swift#L49 does not have the same behavior?

sneko on 30 Jan 2019

If you want to disable bouncing in ios you need to add somewhere (e.g. create DisableBounce.m file) following code:
#import <Foundation/Foundation.h>
#import <UIKit/UIKit.h>

@implementation UIScrollView (NoBounce)
- (void)didMoveToWindow {
    [super didMoveToWindow];
    self.bounces = NO;
}
@end
Additionally, if you use ionic 4, for each ion-content you should set force-overscroll=false.

this breaks < IonRefresher /> at least in React and a few other components act strange. Why is a basic thing still so broken....