'Ionic 2 <ion-content> disable scroll

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.

scroll ionic2

Solution 1:^[1]

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

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

Solution 2:^[2]

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

Solution 3:^[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.

Solution 4:^[4]

This works in ionic 5:

ion-content {
   --overflow: hidden;
}

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

Solution 5:^[5]

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

Solution 6:^[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;
        }
    }
}

Solution 7:^[7]

Content is placed in the scrollable area if provided without a slot. To show a fixed content add slot="fixed".

<ion-content>
<div slot="fixed">

</div>
</ion-content>

Solution 8:^[8]

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!

Solution 9:^[9]

If you want to disable the content scrolling you can use

<ion-content [scrollY]="false" >

https://ionicframework.com/docs/api/content

<ion-content [attr.noScroll]="shouldScroll"></ion-content>
    
// scss file:

[noScroll] {
   overflow: hidden;
}

Solution 10:^[10]

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>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	OriolJ
Solution 2	Haifeng Zhang
Solution 3
Solution 4
Solution 5	nahoang
Solution 6	Eymen Elkum
Solution 7	Arun Girivasan
Solution 8	Rodrigo Chaves
Solution 9
Solution 10	Uzbekjon

'Ionic 2 <ion-content> disable scroll

Solution 1:[1]

Solution 2:[2]

Solution 3:[3]

Solution 4:[4]

Solution 5:[5]

Solution 6:[6]

Solution 7:[7]

Solution 8:[8]

Solution 9:[9]

Solution 10:[10]