Scroll="false" in ionic?


#1

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

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

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! :slight_smile:


#2

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


#3

Same Problem here.
i found this https://github.com/driftyco/ionic/issues/5987 but nothing worked!!

My Forum Post here:

Thanks,
Daniel


#4

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.


#5

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


#6

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/


#7

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


#8

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

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

and CSS

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

#9

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>

#10

No. Actually it is a class.
Check the Video


#11

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.


#12

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


#13

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


#14

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

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

#15

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…


#17

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.


#18

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


#19

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.


#20

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


#21

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:

.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:

  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:

    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.