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.

score 41 · Answer 1 · answered May 03 '17 at 08:41

41

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

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

answered May 03 '17 at 08:41

OriolJ

2,762
1
28
22

3

For anybody with an up to date version of Ionic – this is the best answer for the time being. See: https://github.com/ionic-team/ionic/issues/7644 – shaneparsons Jun 05 '17 at 17:17
After removing any element that had a bigger height than the content, this worked for me aswell – Phonolog May 30 '18 at 07:41
1

Max from Ionic here, it's clear we need to make this way easier. We're passing around this issue internally to make sure we fix this going forward! – Max Jun 07 '18 at 15:10

score 25 · Answer 2 · edited Oct 05 '18 at 04:18

25

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

edited Oct 05 '18 at 04:18

Haifeng Zhang

30,077
19
81
125

answered Aug 07 '17 at 08:26

A.Çetin

250
4
7

Caio Crespo · Answer 3 · 2017-10-04T17:58:16.290

8

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.

edited Oct 04 '17 at 17:58

answered Oct 04 '17 at 12:01

Caio Crespo

93
1
6

Mert Aksoy · Answer 4 · 2020-05-13T09:35:55.350

6

This works in ionic 5:

ion-content {
   --overflow: hidden;
}

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

edited May 13 '20 at 09:35

answered Mar 03 '20 at 22:27

Mert Aksoy

372
1
4
12

This was the solution that worked for me on Ionic 5. None of the other answers worked. – Braelyn B Jan 28 '22 at 04:02

score 3 · Answer 5 · answered Nov 04 '16 at 04:05

3

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

answered Nov 04 '16 at 04:05

nahoang

2,400
1
18
22

1

Thank you very much. But what if I want one page no scroll instead of whole app no scroll? – Reo Lim Nov 04 '16 at 04:10
1

@ReoLim reference http://stackoverflow.com/questions/35952538/how-can-i-disable-or-hide-the-scrollbar-within-an-ionic-2-ion-content .:)) – nahoang Nov 04 '16 at 06:39
1

For newer version of ionic2 it's this.app._setDisableScroll(true); – Frank Goortani Jan 27 '17 at 20:09
Please make @FrankGoortani's comment included in the answer. – ntgCleaner Feb 09 '17 at 21:38

score 2 · Answer 6 · answered Mar 21 '17 at 11:56

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

score 2 · Answer 7 · answered Jan 15 '20 at 04:07

2

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>

answered Jan 15 '20 at 04:07

Arun Girivasan

532
1
10
24

This should be marked as the answer. Using this for displaying non-scrollable skeleton-text while waiting for data to load from database. – Cooper Scott May 20 '20 at 16:49

score 0 · Answer 8 · answered Nov 30 '17 at 11:50

0

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!

answered Nov 30 '17 at 11:50

Rodrigo Chaves

1,094
8
23

Siddhartha Mukherjee · Answer 9 · 2022-02-01T08:08:41.283

0

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

edited Feb 01 '22 at 08:08

answered Mar 01 '21 at 19:13

Siddhartha Mukherjee

2,703
2
24
29

score -1 · Answer 10 · answered Apr 03 '18 at 11:30

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>

Ionic 2 disable scroll

10 Answers10

Linked