How to disable scroll for ion-content in ionic 2? #7644

rhuldip · 2016-08-10T15:58:00Z

Note: If you are having problems formatting your issue please refer to this article on using markdown in Github:

https://guides.github.com/features/mastering-markdown/

Note: for support questions, please use one of these channels:

https://forum.ionicframework.com/
http://ionicworldwide.herokuapp.com/

Short description of the problem:

What behavior are you expecting?

Steps to reproduce:
1.
2.
3.

insert any relevant code between the above and below backticks

Other information: (e.g. stacktraces, related issues, suggestions how to fix, stackoverflow links, forum links, etc)

Which Ionic Version? 1.x or 2.x

Plunker that shows an example of your issue

For Ionic 1 issues - http://plnkr.co/edit/Xo1QyAUx35ny1Xf9ODHx?p=preview

For Ionic 2 issues - http://plnkr.co/edit/me3Uk0GKWVRhZWU0usad?p=preview

Run ionic info from terminal/cmd prompt: (paste output below)

The text was updated successfully, but these errors were encountered:

rhuldip · 2016-08-10T15:58:53Z

i dont want to hijack my browser,any other option by ionic team?

jgw96 · 2016-08-10T16:03:22Z

Hello! Thanks for using Ionic! We actually just documented a method called setScrollDisabled that will allow you to do this. You can see the documentation in this commit. Thanks for using Ionic!

rhuldip · 2016-08-10T16:35:04Z

Hi,any example how can i use it?

documented setEnabled, setScrollDisabled methods

julien-tmp · 2016-08-10T18:07:00Z

Hi @rhuldip . As I understood on another page, you wanted to disable the scroll for and not for the whole app. In this case you can use :

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

and then, in your SCSS file :

[noScroll] {
  overflow: hidden;
}

credits to @mhartington for the guidance

DahliaWitt · 2016-08-14T20:52:34Z

Is there a directive for this? The documentation mentions it but it does not work.

dgroh · 2016-08-16T17:57:45Z

Below I show how this can also be solved:

Create thoses classes in some of zour scss files, i.e app.scss

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

.scroll {
    scroll-content {
        overflow-y: scroll;
    }
}

Then just call:

this.content.addCssClass("no-scroll");

or

this.content.addCssClass("scroll");

Where content is:

@Input("content") protected content: Content;

Hope this helps

haxpor · 2016-10-25T10:19:52Z

Thanks @dgroh , it works really well on my end as of Ionic Framework Version: 2.0.0-rc.1.
Just curious, should scroll-content be .scroll-content as it's class? But it's not that important. Thanks again.

0x1ad2 · 2016-12-01T19:23:32Z

I used the following SO answer to fix it http://stackoverflow.com/a/40826366/1783311

Add this to your .scss file

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

then add the no-scroll class to your ion-content like this

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

iflagri · 2016-12-07T05:35:07Z

I solved it as below.

<ion-content>
   <div ion-fixed>
   </div>
</ion-content>

AjkP · 2017-01-19T04:03:54Z

Hello! Thanks for using Ionic! We actually just documented a method called setScrollDisabled that will allow you to do this. You can see the documentation in this commit. Thanks for using Ionic!

@jgw96 This does not work after RC4. Should we reopen this?

shyamal890 · 2017-01-23T10:12:36Z

@jgw96 please consider adding this functionality, its much needed.

theomathieubhvr · 2017-02-07T19:16:57Z

@iflagri solution works. Thanks !

larssn · 2017-02-15T15:21:06Z

If anyone is still having trouble with this, add no-bounce to ion-content, and see if that fixes it.

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

primerproyecto · 2017-02-15T22:07:06Z

@larssn fix it. Thanks !

nan-ser0 · 2017-02-19T16:14:42Z

@larssn Fix it. ty!

eymen-elkum · 2017-03-21T11:54:33Z

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

mlynch · 2017-05-31T15:54:02Z

Need to support disabling scrolling through an attribute on <ion-content>

pjc2007 · 2017-06-12T02:38:38Z

I have an issue on iOS, where if I have a select doing a scrolling gesture on it scrolls the contents underneath, so I want to disable the scroll when the select is up.

None of the above seems to work for me. I've tried the no-bounce, and also directly added an inline style of style='overflow-y : hidden' just to see if this will stop the scrolling, (so I can then later set it dynamically) but it doesn't.

pjc2007 · 2017-06-12T03:27:10Z

In my case, I had to set this scroll in code, as it is the nested div with the class scroll-content that I needed to add the overflow:hidden to.

To do this in code, I did the following...

 @ViewChild(Content) content: Content;
  ....

  private setDisableScroll(disable: boolean) : void {       
     let scroll = this.content.getScrollElement();
     scroll.style.overflowY = disable ? 'hidden' : 'scroll';                    
    }

gonzag · 2017-06-19T19:29:12Z

@pjc2007, you made my day

Closes ionic-team#7644

KeaganFouche · 2017-07-05T08:39:16Z

@iflagri thank you so much! I was struggling for a few days now, the solution which worked for me was:

<ion-content>
  <span ion-fixed style="height: 100%; width: 100%">
 //all other HTML is here...
</span>
</ion-content>

Sampath-Lokuge · 2017-10-26T15:42:01Z

The only solution which works for me. Thanks @KeaganFouche

sertal70 · 2017-11-06T09:26:32Z

The only working solution for me is @iflagri one. I'm wondering why a div is needed, I tried to put ion-fixed directive directly on ion-content but it doesn't work.

no-bounce simply doesn't work all the time.

saurabhschauhan · 2018-02-22T06:36:53Z

Adding this in config.xml works or me.

<preference name="webviewbounce" value="false" /> <preference name="UIWebViewBounce" value="false" /> <preference name="DisallowOverscroll" value="true" />

enriquerene · 2018-03-29T17:19:49Z

I don't know why exactly you want to remove it, but if because of the fixed height of the ion-content when call page-x tags in a main html file, I solved this inserting ion-grid and after the page tags. Further, I removed the ion-content of the inner pages and all html are wrapped in ion-row, as my home.html (sorry, I couldn't put code in blocks, the preview always gave me inline):

<ion-content no-padding> <ion-grid no-padding> <div class="bg-gradient-light"> <img src="../../assets/imgs/logo.png" /> </div> <page-features></page-features> <page-categories></page-categories> <page-social class="before-footer"></page-social> </ion-grid> </ion-content>

and all my page-pageName has this structure:

<ion-row> <ion-col ...>  </ion-col> </ion-row>

shanemac10 · 2018-07-16T15:11:07Z

Here's how I handled it, which seems like the more natural approach to me. Just open your src/app/app.scss (Where your global styles should live) and add...
.scroll-content { overflow-y: auto; }
Done.

I don't know why you would want to force scroll or hidden, when your style should be dynamic to the content in most cases. If you have a special case, go ahead and hard code it, but in general, I don't understand why Ionic has this overridden to scroll.

chriskuech · 2018-07-29T17:45:27Z

Every single page has a scrollbar by default that only scrolls at most a couple pixels. This should be considered a bug. The no-bounce fix above appears to work, but should not need to be added to every non-scrolling view.

ionitron-bot · 2018-11-01T20:43:01Z

Thanks for the issue! We have moved the source code and issues for Ionic 3 into a separate repository. I am moving this issue to the repository for Ionic 3. Please track this issue over there.

Thank you for using Ionic!

ionitron-bot · 2018-11-28T21:46:17Z

This issue has been automatically identified as an Ionic 3 issue. We recently moved Ionic 3 to its own repository. I am moving this issue to the repository for Ionic 3. Please track this issue over there.

If I've made a mistake, and if this issue is still relevant to Ionic 4, please let the Ionic Framework team know!

Thank you for using Ionic!

ionitron-bot · 2018-11-28T21:46:19Z

Issue moved to: ionic-team/ionic-v3#123

Ionitron added the v2 label Aug 10, 2016

jgw96 closed this as completed Aug 10, 2016

julien-tmp referenced this issue Aug 10, 2016

docs(app): documented setEnabled, setScrollDisabled methods

e244d09

documented setEnabled, setScrollDisabled methods

jczaplew mentioned this issue Mar 8, 2017

Unable to zoom map on iOS device #10695

Closed

mlynch reopened this May 31, 2017

Manduro added a commit to Manduro/ionic that referenced this issue Jun 30, 2017

feat(content): add no-scroll attribute to disable scrolling

5b7e3e1

Closes ionic-team#7644

Manduro mentioned this issue Jun 30, 2017

feat(content): add no-scroll attribute to disable scrolling #12218

Closed

twinssbc mentioned this issue Jan 2, 2018

Could I prevent vertical scrolling in month view in iOS? twinssbc/Ionic2-Calendar#257

Closed

adamdbradley added the ionitron: v3 moves the issue to the ionic-v3 repository label Nov 1, 2018

imhoffd added ionitron: v3 moves the issue to the ionic-v3 repository and removed ionitron: v3 moves the issue to the ionic-v3 repository labels Nov 1, 2018

imhoffd removed the ionitron: v3 moves the issue to the ionic-v3 repository label Nov 28, 2018

Ionitron added the ionitron: v3 moves the issue to the ionic-v3 repository label Nov 28, 2018

ionitron-bot bot mentioned this issue Nov 28, 2018

How to disable scroll for ion-content in ionic 2? ionic-team/ionic-v3#123

Open

ionitron-bot bot closed this as completed Nov 28, 2018

ionitron-bot bot locked and limited conversation to collaborators Nov 28, 2018

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

How to disable scroll for ion-content in ionic 2? #7644

How to disable scroll for ion-content in ionic 2? #7644

rhuldip commented Aug 10, 2016

rhuldip commented Aug 10, 2016

jgw96 commented Aug 10, 2016

rhuldip commented Aug 10, 2016

julien-tmp commented Aug 10, 2016 •

edited

Loading

DahliaWitt commented Aug 14, 2016

dgroh commented Aug 16, 2016 •

edited

Loading

haxpor commented Oct 25, 2016

0x1ad2 commented Dec 1, 2016

iflagri commented Dec 7, 2016 •

edited

Loading

AjkP commented Jan 19, 2017 •

edited

Loading

shyamal890 commented Jan 23, 2017

theomathieubhvr commented Feb 7, 2017

larssn commented Feb 15, 2017

primerproyecto commented Feb 15, 2017

nan-ser0 commented Feb 19, 2017

eymen-elkum commented Mar 21, 2017

mlynch commented May 31, 2017 •

edited

Loading

pjc2007 commented Jun 12, 2017 •

edited

Loading

pjc2007 commented Jun 12, 2017

gonzag commented Jun 19, 2017

KeaganFouche commented Jul 5, 2017 •

edited

Loading

Sampath-Lokuge commented Oct 26, 2017

sertal70 commented Nov 6, 2017

saurabhschauhan commented Feb 22, 2018

enriquerene commented Mar 29, 2018

shanemac10 commented Jul 16, 2018

chriskuech commented Jul 29, 2018

ionitron-bot bot commented Nov 1, 2018

ionitron-bot bot commented Nov 28, 2018

ionitron-bot bot commented Nov 28, 2018

How to disable scroll for ion-content in ionic 2? #7644

How to disable scroll for ion-content in ionic 2? #7644

Comments

rhuldip commented Aug 10, 2016

Short description of the problem:

What behavior are you expecting?

Plunker that shows an example of your issue

rhuldip commented Aug 10, 2016

jgw96 commented Aug 10, 2016

rhuldip commented Aug 10, 2016

julien-tmp commented Aug 10, 2016 • edited Loading

DahliaWitt commented Aug 14, 2016

dgroh commented Aug 16, 2016 • edited Loading

haxpor commented Oct 25, 2016

0x1ad2 commented Dec 1, 2016

iflagri commented Dec 7, 2016 • edited Loading

AjkP commented Jan 19, 2017 • edited Loading

shyamal890 commented Jan 23, 2017

theomathieubhvr commented Feb 7, 2017

larssn commented Feb 15, 2017

primerproyecto commented Feb 15, 2017

nan-ser0 commented Feb 19, 2017

eymen-elkum commented Mar 21, 2017

mlynch commented May 31, 2017 • edited Loading

pjc2007 commented Jun 12, 2017 • edited Loading

pjc2007 commented Jun 12, 2017

gonzag commented Jun 19, 2017

KeaganFouche commented Jul 5, 2017 • edited Loading

Sampath-Lokuge commented Oct 26, 2017

sertal70 commented Nov 6, 2017

saurabhschauhan commented Feb 22, 2018

enriquerene commented Mar 29, 2018

shanemac10 commented Jul 16, 2018

chriskuech commented Jul 29, 2018

ionitron-bot bot commented Nov 1, 2018

ionitron-bot bot commented Nov 28, 2018

ionitron-bot bot commented Nov 28, 2018

julien-tmp commented Aug 10, 2016 •

edited

Loading

dgroh commented Aug 16, 2016 •

edited

Loading

iflagri commented Dec 7, 2016 •

edited

Loading

AjkP commented Jan 19, 2017 •

edited

Loading

mlynch commented May 31, 2017 •

edited

Loading

pjc2007 commented Jun 12, 2017 •

edited

Loading

KeaganFouche commented Jul 5, 2017 •

edited

Loading