Ionic 2 disable scroll

Question

I've tried several methods to disable scroll, including using CSS position: fixed, attribute overflow-scroll="false" and etc, but all methods failed.

When I swipe down, the buttons will go up and while I swipe up the buttons will go down, like bouncing effect.

May I know any solutions to this issue? Thank you very very much.

Answer 1

Surprisingly, no-bounce attribute did work on my previous project and is not working on a new project that I am currently working on.

I tried @rodrigo-chave's solution with ion-fixed. It solved the scrolling problem, but made my content small (as if was zoomed out). Adding 100% CSS width and height properties fixed it.

<ion-content no-bounce>
  <div ion-fixed style="height: 100%; width: 100%">
    ...
  </div>
</ion-content>

Answer 2

If you don't want the scroll you may also don't need the ion-content itself, in my status for example I want to use the ion-grid directly.

<!-- my-page.ts >
<ion-header>.......</ion-header>
<ion-grid class="has-header fixed-content">

</ion-grid>

and I added some scss for the has-header class:

ion-app {
    &.md {
        .has-header {
            margin-top: $toolbar-md-height;
        }
    }
    &.wp {
        .has-header {
            margin-top: $toolbar-wp-height;
        }
    }
    &.ios {
        .has-header {
            margin-top: $toolbar-ios-height;
        }
    }
}

Answer 3

The ion-content has a class called 'scroll-content'.

With that in mind, go to your app.css, inside the src/app and add:

---

app.css:

.scroll-content{overflow-y: hidden;}

---

That should leave your ion-content with no scroll, but I'd rather user:

app.css:

.scroll-content{overflow-y: auto;}

since this allows the scroll-content only if the page content overflows the ion-content.

Answer 4

As iflagri posted in this issue and @shaneparsons pointed in the comments, using

<ion-content padding>
  <div ion-fixed>

    Your content here...

  </div>
</ion-content>

Solve the problem.

Hope it help!

Answer 5

This works in ionic 5:

ion-content {
   --overflow: hidden;
}

<ion-content scroll-y="false">

Answer 6

Tested with ionic 3 (should work on ionic 2):

<ion-content no-bounce></ion-content>