How can I disable or hide the scrollbar within an Ionic 2

Question

I have an Angular 2 app wrapped in Ionic 2. I'm using <ion-tabs>, and within each tab is an <ion-content>. The content in this area needs to be scrollable, but Ionic 2 adds a scrollbar that I don't want displayed. It appears that, when compiled, an <ion-content> has a <scroll-content> injected into it. I don't want this behavior.

I have tried many of the solutions that used to work in Ionic 1, but they do not work in Ionic 2:

Setting scroll="false" on the <ion-content>
Setting scrollbar-y="false" on the <ion-content>
Setting overflow-scroll="false" on the <ion-content>
Setting the following in css:

.scroll-bar-indicator { display: none; }

etc...

Setting the following actually does work to remove the scrollbar, but I'd rather not hijack the browser behavior, and also it removes scrollbars from content internal to the <ion-content> tag, which I don't want.

::-webkit-scrollbar,
*::-webkit-scrollbar {
  display: none;
}

Yea, same here... as far as i know it seems that the ionic team didn't added this options for now, so i think the only way is hijacking the browser like you did, but add it to a class that you use only in a specific that you want to hide the scrollbar. Sorry for my english. — aluknot, Mar 12 '16 at 07:11
Thanks for your hijacking solution, it works, and I don't see a reason to keep a scrollbar in my app, so I prefer to remove it permanently. — davyzhang, Mar 21 '16 at 08:07
@Aish123 I haven't looked into it since around the time I posted this question, but eventually I came to the conclusion that what I wanted to do was not currently possible with Ionic 2. The situation with Ionic 2 may have changed then since it was under rapid development in alpha status at the time. — vaer-k, Jul 05 '16 at 18:34
::-webkit-scrollbar, *::-webkit-scrollbar { display: none; } worked for me — Praneeth Nidarshan, Jun 25 '17 at 03:07

score 44 · Accepted Answer · edited May 13 '18 at 23:50

They have a class for that and should be able to use:

 import { App } from 'ionic-angular';

 constructor(private app: App) {
   app.setScrollDisabled(true);
};

See forum discussion here. But it seems to have stopped working after 2.0.0-rc.1 I believe thats related to this in their CHANGELOG when they changed a lot of attributes to classes (i.e. scroll-content to .scroll-content) and the app.setScrollDisabled(true); hasn't been updated to reflect some of those changes.

If your using 2.0.0-rc.2 or 2.0.0-rc.3 I don't believe <ion-content overflow-scroll="false"> or <ion-content ion-fixed> will work either so from now create your own class.

So if you're on 2.0.0-rc.2 or 2.0.0-rc.3 you should be able to do so by adding this to your .scss

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

and add this class to your ion-content like this

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

So now just keep an eye out for this being fixed on versions after 2.0.0-rc.3.

UPDATE (2.0.0-rc.6): It looks like they made the App modules setDisableScroll function private (as seen here)

Also here's a full list of the available function for the App module by version:

2.0.0-rc.1 (has setScrollDisabled)
2.0.0-rc.2 (has setScrollDisabled)
2.0.0-rc.3 (has setScrollDisabled)
2.0.0-rc.4 (no setScrollDisabled, and no alternative)
2.0.0-rc.5 (still no setScrollDisabled or alternative)
2.0.0-rc.6 (no setScrollDisabled, and no alternative but they did a a lot more view tirgger functions like viewWillUnload)

So unless they bring it back keep using the following:

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

Also I'm a sucker for them internet points so preeez upvote if you found this helpful.

Yes your right, running 2.0.0-rc.3 adding the custom class did the job. Thanks! — 0x1ad2, Dec 01 '16 at 19:21
@Mohsen I updated my answer. They removed the `setScrollDisabled` altogether looks like. — garrettmac, Jan 09 '17 at 07:23
Thanks for updating this information, it should really be incorporated into ionic2 changelog. Your CSS is working for me. I hope to get notified by SO if this changes again and you update. — Meryan, Feb 14 '17 at 09:41

score 19 · Answer 2 · answered Jan 11 '17 at 21:21

19

In ionic2 I saw overflow-y is set to scroll by default so in your src/app/app.scss file try this:

.scroll-content {
   overflow-y: auto !important;
}

This will hide scroll bar from every view and also enable scrolling when it has content.

answered Jan 11 '17 at 21:21

jewelfarazi

460
4
10

I added the following CSS code and it disabled the scroll on an ion-content directive: .scroll-content { overflow-y: hidden !important; } – JLavoie Aug 09 '17 at 21:22

score 7 · Answer 3 · edited Mar 24 '18 at 07:58

7

You can override the scroll-content style in your .scss file.

// scroll-content is a class
.scroll-content {
    overflow-y: auto;
}

or better still you can set overflow-y: hidden;

edited Mar 24 '18 at 07:58

answered Mar 14 '16 at 00:56

Nii

87
1

2

Thanks for your answer. Unfortunately, it doesn't work because it removes the ability to scroll. I only want to remove the scroll _bar_, not the scroll _behavior_. – vaer-k Mar 14 '16 at 16:12
set only overflow-y as auto ,this just hides but doesn'y disable functionality, tried it, works perfectly! – Yash Soni Jan 12 '19 at 19:26

Eymen Elkum · Answer 4 · 2017-08-20T04:38:27.333

If you just want to hide the scroll-bar, and not want to disable the scrolling itself, then use no-bounce attr:

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

thanks to larssn for his comment

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

Agreed. The `ion-content` description is all about support for scrolling. "The Content component provides an easy to use content area with some useful methods to control the scrollable area. There should only be one content in a single view component. If additional scrollable elements are need, use ionScroll." *So if you don't want scrolling using ion-grid instead*. — Tony O'Hagan, Apr 28 '17 at 05:24

Siyu · Answer 5 · 2018-11-06T01:28:45.167

3

I am using Ionic 2 rc 0

My solution is to use an ion-fixed attribute on a div I called envelope.

(in rc 0, you can't add ion-fixed to ion-content)

<ion-content>
  <div id='envelope' ion-fixed>
  </div>
</ionic-content>

#envelope{
  width: 100%;
  min-height: 100%;
  padding: 0;
  margin: 0;
  height: 100%;
  overflow: hidden;
}

edited Nov 06 '18 at 01:28

answered Nov 10 '16 at 17:43

Siyu

11,187
4
43
55

score 2 · Answer 6 · answered Feb 22 '18 at 06:38

2

Adding this in config.xml works for me.

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

answered Feb 22 '18 at 06:38

Saurabh Chauhan

711
6
11

score 1 · Answer 7 · answered Apr 23 '17 at 15:36

1

Ionic2 has added setScrollDisabled with underscore prefix. So if you would like to access just make use of injectable variable app and try to set the this.app._setScrollDisabled(true).I hope it will work.

answered Apr 23 '17 at 15:36

Sachin Mishra

1,125
1
16
17

score 0 · Answer 8 · answered Jan 15 '18 at 11:24

0

Add this css into your styles,

I fetched this class from inspect element which contains scrollbar and items

ion-scroll.scroll-y .scroll-content::-webkit-scrollbar{
  display: none;
}

worked for me

answered Jan 15 '18 at 11:24

Vivek Chaugule

9
3

Thank You, Work for me. But Mozilla Firefox not proper working. – Jaimin Patel Mar 31 '18 at 04:35

score 0 · Answer 9 · edited Dec 08 '21 at 04:23

0

I got it to work perfectly in my Ionic5/Angular11 app while retaining scroll events and hiding the scrollbar with the code below:

ion-content {
  width: calc(100% + 20px);
  --padding-end: 40px !important;
}

ion-content::part(scroll) {
  margin-right: -20px;
}

edited Dec 08 '21 at 04:23

Henry Ecker

34,399
18
41
57

answered Dec 08 '21 at 04:18

Sam

1

score -6 · Answer 10 · answered Aug 28 '16 at 17:12

-6

use overflow-scroll="false" in ion-content

answered Aug 28 '16 at 17:12

Krunal Panchal

131
12

How can I disable or hide the scrollbar within an Ionic 2

10 Answers10

Linked

Related