question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

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

See original GitHub issue

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 <body bigger than the <body height, something like:

  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 👍

Issue Analytics

  • State:closed
  • Created 5 years ago
  • Comments:10 (3 by maintainers)

github_iconTop GitHub Comments

15reactions
MarkChrisLevycommented, Jan 30, 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.

2reactions
ollydixoncommented, Oct 26, 2020

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…

Read more comments on GitHub >

github_iconTop Results From Across the Web

Scroll Bouncing On Your Websites - Smashing Magazine
This article describes the effect of scroll bouncing and how it works on different web browsers. It contains reviews of several different ...
Read more >
Prevent iOS bounce without disabling scroll ability
I am guessing this is because the content (other than the footer) is always just large enough that the scroll is not needed,...
Read more >
Prevent overscroll/bounce in iOS MobileSafari and Chrome ...
Know this bouncy overscrolling behaviour that browsers have been doing whenever you reach the “edge” of the page its contents? elastic-scrolling
Read more >
bounces | Apple Developer Documentation
A Boolean value that controls whether the scroll view bounces past the edge of content and back again.
Read more >
overscroll-behavior - CSS: Cascading Style Sheets | MDN
Default scroll overflow behavior is observed inside the element this value is set on (e.g. "bounce" effects or refreshes), but no scroll ......
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found