Disable content bouncing

ionic-v1
1

In this example:

when you drag search it bounces.
How to disable it?

ps. In cordova config.xml I have:

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

but it doesn’t not solve the problem.

2

It’s an ionic thing, not a cordova issue.

 <ion-content
         has-bouncing="false"
         start-y="55"
         padding="true"
         has-tabs="true"
         has-header="true"
         >

Use the has-bouncing attribute to disable the bounce effect on the ion-content directive

2 Likes
3

It was very helpful. Thank you Mike.

4

The has-bouncing attribute should definitely be more visible in the docs. The fact that it overrides all three config preferences and is “on” by default, makes it extremely difficult debug when trying to turn off bouncing.

I say this coming from 3 hours changing config preferences and doing builds trying to debug this.

Thanks for your answer though, finally have bouncing turned off!

Also have a SO Question on this: http://stackoverflow.com/questions/23374301/how-to-prevent-uiwebviewbounce-rubber-banding/23375549

5

Is there a way to turn it off in a global scope??

2 Likes
6

Thank you :slight_smile:

Can you confirm if the cordova settings are irrelevant then?

7

No, the cordova settings aren’t irrelevant.
They’re to prevent the entire webview from having the elastic-scrolling effect

8

because the following code does not work **<ion-content overflow-scroll="true" has-bouncing="false" >**, Is there any solution ?? I’m sorry the bad english

1 Like
9

Is there a way to turn off in a global scope?

10

@mhartington
Has-bouncing=“false” does not prevent bouncing on iOS. I am using ionic 1.2.4

Same issue like here. Any workaround? or any temporary solution?

11

Hmm, looking at ios right now and it’s working for me without any issues.
This is using 1.2.4.

12

Im running 1.2.0, and the following does not disable bouncing:

<ion-content has-bouncing="false" overflow-scroll="true" class="has-header has-subheader">

EDIT:
Upgraded to version 1.3, and has-bouncing works as expected.

<ion-content has-bouncing="false" class="has-header has-subheader">

Content scrolls normally with no bounce.

13

How to disable bouncing en Ionic 2?

14

This is not possible at the moment

15

There is a attribute no-bounce. Unfortunately it is not working on iOS 10 (Simulator,real Device). Is it known ?
Thanks

16

In case anybody want to disable bouncing globally, I am able to make it work using decorator (inspired by decorating directive). I didn’t check yet any side effect of this, but at least work for now

    app.config(['$provide', function($provide) {
        $provide.decorator('ionContentDirective', function($delegate) {
            var directive = $delegate[0];

            var compile = directive.compile;
            directive.compile = function(element, attrs) {
                    if (attrs.hasBouncing == undefined) attrs.hasBouncing = "false";
                    return compile.apply(this, arguments);
                };

            return $delegate;
        });
    }])

checked on the browser and ios simulator.

17

Adding the attribute no-bounce to my <ion-content> works for me on iOS 10 using Ionic 3.1.1. It correctly prevents me from scrolling past the top of the content, which makes my swipe to go back transitions much cleaner. I’m not sure why it’s not documented.

18

@shanson
did you try on real device, it is working on emulator but not working on real device ios 10.3.2

19

@ajaysaini, yes, it appears to be working on my iPhone running 10.3.2.

20

Thanks man! Works like a charm.