# Scroll="false" in ionic?

**URL:** <https://forum.ionicframework.com/t/scroll-false-in-ionic/64571>\
**Category:** ionic-v3\
**Created:** [September 26, 2016, 5:20pm UTC](https://forum.ionicframework.com/t/scroll-false-in-ionic/64571 "2016-09-26T17:20:01Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![ekhmoi](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/ekhmoi/32/103413_2.png) [@ekhmoi](https://forum.ionicframework.com/u/ekhmoi)\
**Post date:** [September 26, 2016, 5:20pm UTC](https://forum.ionicframework.com/t/scroll-false-in-ionic/64571/1 "2016-09-26T17:20:01Z")

</div>

Hello.  
I would love to have a page where user can not scroll.  
In first version of ionic i could simply add `scroll="false"` and it would turn off the scroll of the content.  
Now to turn off the scroll i’m doing the following dirty work

```auto
ion-content[scroll="false"] {
  scroll-content {
    overflow-y: hidden!important;
  }
}

```

As ionic automatically creates `margin-top` and `margin-bottom` for `scroll-content` , im doing the following to overwrite them

```auto
ionViewLoaded() {
    setTimeout( () => {
      this.calcScrollStyle();
    }, 100);
  }

calcScrollStyle() {
    let scrollContent = <HTMLElement>document.getElementsByTagName('scroll-content').item(document.getElementsByTagName('scroll-content').length -1);
    scrollContent.style['padding-top'] = scrollContent.style['margin-top'];
    scrollContent.style['padding-bottom'] = scrollContent.style['margin-bottom'];
    scrollContent.style['margin-top'] = '0px';
    scrollContent.style['margin-bottom'] = '0px';
    scrollContent.style['height'] = '100%';
  }

```

As you can see it is very dirty way of accomplishing simple thing.  
Maybe there is an easier way of disabling the scroll in ionic2 ???

Thanks in advance! 🙂

---

<div class="post-metadata">

**Author:** ![ekhmoi](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/ekhmoi/32/103413_2.png) [@ekhmoi](https://forum.ionicframework.com/u/ekhmoi)\
**Post date:** [September 26, 2016, 6:30pm UTC](https://forum.ionicframework.com/t/scroll-false-in-ionic/64571/2 "2016-09-26T18:30:53Z")

</div>

If any1 else wants to disable scroll:

I’ve checked and figured out that: scroll will be disabled if total height of the elements inside ion-content will not be more than height of scroll content.

therefore i prepared my content to be exactly the same height as scroll content using relativity

---

<div class="post-metadata">

**Author:** ![danielmm1997](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/danielmm1997/32/85966_2.png) [@danielmm1997](https://forum.ionicframework.com/u/danielmm1997)\
**Post date:** [September 26, 2016, 7:18pm UTC](https://forum.ionicframework.com/t/scroll-false-in-ionic/64571/3 "2016-09-26T19:18:17Z")

</div>

Same Problem here.  
i found this [Proposal: Non-scrollable page content · Issue #5987 · ionic-team/ionic-framework · GitHub](https://github.com/driftyco/ionic/issues/5987) but nothing worked!!

My Forum Post here:

> [@How to use ion-fixed](https://forum.ionicframework.com/t/how-to-use-ion-fixed/61947):
>
> Hi, can you add ion-fixed in your doc? How can i use ion-fixed? Thanks, Daniel

Thanks,  
Daniel

---

<div class="post-metadata">

**Author:** ![Sulot](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/sulot/32/100183_2.png) [@Sulot](https://forum.ionicframework.com/u/Sulot)\
**Post date:** [September 26, 2016, 7:25pm UTC](https://forum.ionicframework.com/t/scroll-false-in-ionic/64571/4 "2016-09-26T19:25:45Z")

</div>

I don’t think it is a good solution as you work on dom element and this is something you shouldn’t be doing in Angular2.

---

<div class="post-metadata">

**Author:** ![ekhmoi](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/ekhmoi/32/103413_2.png) [@ekhmoi](https://forum.ionicframework.com/u/ekhmoi)\
**Post date:** [September 26, 2016, 7:38pm UTC](https://forum.ionicframework.com/t/scroll-false-in-ionic/64571/5 "2016-09-26T19:38:40Z")

</div>

Yes i totally agree with you.  
that is why i replied above

> If any1 else wants to disable scroll:

> I’ve checked and figured out that: scroll will be disabled if total height of the elements inside ion-content will not be more than height of scroll content.

> therefore i prepared my content to be exactly the same height as scroll content using relativity

so im not doing any of that dirty work anymore, i just placed elements inside ion-content to have correct height

---

<div class="post-metadata">

**Author:** ![Sulot](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/sulot/32/100183_2.png) [@Sulot](https://forum.ionicframework.com/u/Sulot)\
**Post date:** [September 26, 2016, 7:40pm UTC](https://forum.ionicframework.com/t/scroll-false-in-ionic/64571/6 "2016-09-26T19:40:19Z")

</div>

I have been searching on web for a week now. Can’t find any solution. I need my content to not be bouncable and scrollable. Can’t find a solution. I am happy if you share yours

Bacically we need this page in Ionic2:  
[http://ionicframework.com/docs/api/directive/ionContent/](http://ionicframework.com/docs/api/directive/ionContent/)

---

<div class="post-metadata">

**Author:** ![Sulot](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/sulot/32/100183_2.png) [@Sulot](https://forum.ionicframework.com/u/Sulot)\
**Post date:** [September 26, 2016, 7:43pm UTC](https://forum.ionicframework.com/t/scroll-false-in-ionic/64571/7 "2016-09-26T19:43:42Z")

</div>

HINT: It looks like there is a class “no-bounce”. Search in the entire solution “no-bounce”, you ll find something in app.ios.css

and

> <https://stackoverflow.com/questions/35952538/how-can-i-disable-or-hide-the-scrollbar-within-an-ionic-2-ion-content>

---

<div class="post-metadata">

**Author:** ![ekhmoi](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/ekhmoi/32/103413_2.png) [@ekhmoi](https://forum.ionicframework.com/u/ekhmoi)\
**Post date:** [September 26, 2016, 7:50pm UTC](https://forum.ionicframework.com/t/scroll-false-in-ionic/64571/8 "2016-09-26T19:50:44Z")

</div>

There is also class `disable-scroll` which ionic applies to `<ion-app>` when you open AlertController or LoadingController.  
However i’m not still sure how to use that.

Regarding to my current solution i have followings:  
HTML

```auto
<ion-content class="home-page" >
    <ion-row height-50>
      
    </ion-row>
    <ion-row height-50>
      
    </ion-row>
   
</ion-content>

```

and CSS

```auto
.home-page {
   ion-row[height-50] {
      height: 50%;
      position: relative;
   }
}

```

---

<div class="post-metadata">

**Author:** ![Sulot](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/sulot/32/100183_2.png) [@Sulot](https://forum.ionicframework.com/u/Sulot)\
**Post date:** [September 26, 2016, 7:54pm UTC](https://forum.ionicframework.com/t/scroll-false-in-ionic/64571/9 "2016-09-26T19:54:02Z")

</div>

hum I am guessing it is an attribute not a class:

So I am guessing:

```
<ion-content no-bounce>

</ion-content>

```

or, in your case:

```
<ion-content disable-scroll>

</ion-content>
```

---

<div class="post-metadata">

**Author:** ![ekhmoi](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/ekhmoi/32/103413_2.png) [@ekhmoi](https://forum.ionicframework.com/u/ekhmoi)\
**Post date:** [September 26, 2016, 8:02pm UTC](https://forum.ionicframework.com/t/scroll-false-in-ionic/64571/10 "2016-09-26T20:02:48Z")

</div>

No. Actually it is a class.  
Check the [Video](https://youtu.be/A3_FzUJ6v8o)

---

<div class="post-metadata">

**Author:** ![intelinc](https://avatars.discourse-cdn.com/v4/letter/i/b5a626/32.png) [@intelinc](https://forum.ionicframework.com/u/intelinc)\
**Post date:** [September 29, 2016, 3:18am UTC](https://forum.ionicframework.com/t/scroll-false-in-ionic/64571/11 "2016-09-29T03:18:25Z")

</div>

This is driving me nuts as well. Seems like there should be a simple way to do this. Change docs for RC0 state:

`<ion-fixed> has been removed, use <div ion-fixed> instead.`

I’ve tried using `<div ion-fixed>` with and without an enclosing container tag. While it does seem to disable scrolling, it also hoses my previously functional layout.

---

<div class="post-metadata">

**Author:** ![danielmm1997](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/danielmm1997/32/85966_2.png) [@danielmm1997](https://forum.ionicframework.com/u/danielmm1997)\
**Post date:** [October 3, 2016, 3:59pm UTC](https://forum.ionicframework.com/t/scroll-false-in-ionic/64571/12 "2016-10-03T15:59:05Z")

</div>

yes i know this but i have the problem that my fixed content overlay the scroll content.

Here is my fix:  
_home.html_

```
  <div #fixed ion-fixed>
    <!-- Fixed Content -->
  </div>
  <div style="margin-top: {{fixedheight}}">
    <!-- Scroll Content -->
  </div>

```

_home.ts_  
`import {ViewChild, ElementRef} from '@angular/core';`  
…  
export class HomePage {  
@ViewChild(‘fixed’) mapElement: ElementRef;  
fixedheight: any;  
ionViewDidEnter() {  
this.initializeMap();  
this.fixedheight = this.mapElement.nativeElement.offsetHeight;  
}  
}

---

<div class="post-metadata">

**Author:** ![mse](https://avatars.discourse-cdn.com/v4/letter/m/7cd45c/32.png) [@mse](https://forum.ionicframework.com/u/mse)\
**Post date:** [November 7, 2016, 5:01pm UTC](https://forum.ionicframework.com/t/scroll-false-in-ionic/64571/13 "2016-11-07T17:01:19Z")

</div>

FYI I create an issue for that since I have the samme problem.

> <https://github.com/ionic-team/ionic/issues/9071>

---

<div class="post-metadata">

**Author:** ![mebibou](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/mebibou/32/73984_2.png) [@mebibou](https://forum.ionicframework.com/u/mebibou)\
**Post date:** [October 5, 2017, 7:54am UTC](https://forum.ionicframework.com/t/scroll-false-in-ionic/64571/14 "2017-10-05T07:54:00Z")

</div>

My current solution workaround is to add a component on `ion-fixed` attribute:

```auto
import { Component, ElementRef } from '@angular/core';

@Component({
  selector: '[ion-fixed]',
  template: `
    <style>
      :host { width: 100%; }
    </style>
    <ng-content></ng-content>
  `
})
export class IonFixedComponent {
  constructor(private el: ElementRef) {}

  ngAfterViewInit() {
    setTimeout(() => {
      this.resizeScrollContent();
    }, 500);
  }

  private resizeScrollContent() {
    const fixedHeight = this.el.nativeElement.offsetHeight;
    const fixedContent = this.el.nativeElement.parentElement;
    const scrollContent = fixedContent.nextElementSibling;

    scrollContent.style.marginTop = `${parseInt(scrollContent.style.marginTop, 10) + fixedHeight}px`;
  }
}

```

---

<div class="post-metadata">

**Author:** ![Judgewest2000](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/judgewest2000/32/113339_2.png) [@Judgewest2000](https://forum.ionicframework.com/u/Judgewest2000)\
**Post date:** [October 5, 2017, 9:12am UTC](https://forum.ionicframework.com/t/scroll-false-in-ionic/64571/15 "2017-10-05T09:12:24Z")

</div>

Those people who take you for ‘fools’ are providing one of the very best toolsets out there for zero money. They deserve your respect

Literally took a minute to make scrolling stop…

> **[judgewest2000/IonicNoBounce](https://github.com/judgewest2000/IonicNoBounce)**
>
> IonicNoBounce - A REALLY quick demonstration of disabling scrolling.

---

<div class="post-metadata">

**Author:** ![anicacute09](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/anicacute09/32/113162_2.png) [@anicacute09](https://forum.ionicframework.com/u/anicacute09)\
**Post date:** [October 5, 2017, 9:19am UTC](https://forum.ionicframework.com/t/scroll-false-in-ionic/64571/17 "2017-10-05T09:19:18Z")

</div>

There is no perfect thing in this world, we should keep that all in our minds. You just need to sort out things if it doesn’t work or just change to other ways like React if Ionic doesn’t satisfy what you need.

---

<div class="post-metadata">

**Author:** ![mebibou](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/mebibou/32/73984_2.png) [@mebibou](https://forum.ionicframework.com/u/mebibou)\
**Post date:** [October 5, 2017, 9:24am UTC](https://forum.ionicframework.com/t/scroll-false-in-ionic/64571/18 "2017-10-05T09:24:59Z")

</div>

ok I’ve edited my comment so we can all focus on the issue, thanks!

---

<div class="post-metadata">

**Author:** ![Judgewest2000](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/judgewest2000/32/113339_2.png) [@Judgewest2000](https://forum.ionicframework.com/u/Judgewest2000)\
**Post date:** [October 5, 2017, 9:25am UTC](https://forum.ionicframework.com/t/scroll-false-in-ionic/64571/19 "2017-10-05T09:25:18Z")

</div>

The ‘fools’ part is expecting Ionic to jump over a feature that is easy to circumvent and is very niche.  
AND it’s open source - you are absolutely free to fix it yourself - much more constructive approach.

Like - if you’re trying to stop scrolling you really shouldn’t have content going beyond the screen’s size.

---

<div class="post-metadata">

**Author:** ![mebibou](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/mebibou/32/73984_2.png) [@mebibou](https://forum.ionicframework.com/u/mebibou)\
**Post date:** [October 5, 2017, 9:29am UTC](https://forum.ionicframework.com/t/scroll-false-in-ionic/64571/20 "2017-10-05T09:29:13Z")

</div>

it’s about fixed content not stopping scrolling, but thanks for your help

---

<div class="post-metadata">

**Author:** ![intelinc](https://avatars.discourse-cdn.com/v4/letter/i/b5a626/32.png) [@intelinc](https://forum.ionicframework.com/u/intelinc)\
**Post date:** [January 4, 2018, 7:35am UTC](https://forum.ionicframework.com/t/scroll-false-in-ionic/64571/21 "2018-01-04T07:35:50Z")

</div>

I agree that the inability to have simple control of page scrolling is a curious omission. Looks like it may be rectified soon. In the meantime, I’ve been using ng2-dragula to add some basic draggable reordering to cards, and have run into the issue where page scrolling does not play nicely whilst card-dragging. This is what I’ve done to solve it for my use case. (this is not production tested)

I have a no-scroll css class that can be applied to ion-content:

```auto
.no-scroll {
    .scroll-content {
        overflow: hidden !important;
    }
}

```

I then bind the class attribute of ion-content to a scrollable variable in my component.

`<ion-content [class]="scrollable" padding >`

In my component, I add two methods to add and remove the no-scroll class:

```auto
  private disableScroll() {
    this.scrollable = 'no-scroll'
  }
  private enableScroll() {
    this.scrollable = ''
  }

```

Finally, I bind the appropriate dragula events to apply/remove the no-scroll class in my component’s constructor:

```auto
    dragulaService.drag.subscribe((value) => {
      this.disableScroll();
    });
    dragulaService.drop.subscribe((value) => {
      this.enableScroll()
    });

```

Page is scrollable, except when a card is being dragged. It’s not perfect (ideally I’d like to page to scroll if the user drags an element to the top of a list that is scrolled offscreen for instance), but it’s simple and it’s working for my needs for the moment.

[Next page](https://forum.ionicframework.com/t/scroll-false-in-ionic/64571.md?page=2)