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

Answer 1

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 2

For disable scroll in ion-content can use setScrollDisabled() method. You should follow steps below.

In hello.ts

 import { app } from 'ionic-angular';

   public class HelloPage
   {
       constructor(private app: App) {};

        ngAfterViewInit(){
        this.app.setScrollDisabled(true);
      }
    }

Answer 3

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 4

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 5

I solved same problem using css. (Ionıc 3.6)

Step1: In ion-content add a new class :

<ion-content class="no-scroll">

Step2: In your CSS add the code below :

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

Answer 6

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