Ionic 4: how to hide ScrollBar in ion-content

html css angular ionic-framework ionic4
Roishuk picture Roishuk · Jan 19, 2019 · Viewed 11.4k times · Source

Im trying to hide the scroll-bar in ion-content (Ionic 4) there's no ion-scroll on ionic 4 so I used the ion-content but I can't find any css attribute to hide it (most of them not work)

I do want to scroll but I don't want to see the scrollbar

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

I've tried it but it doesn't work in ion-content.. thanks alot.

Answer

Rostislav picture Rostislav · Feb 17, 2019

In Ionic 4 you must use following, because Ionic use shadow DOM:

global.scss

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

and in page

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

Related questions

How to set width of mat-table column in angular?

Here in my mat-table have 6 column when any column has not more words then it looks like Image-1, but when any column has more words then UI looks like Image-2, so how to set UI like Image-1 when any column …

Read More
How to add background-image using ngStyle (angular2)?

How to use ngStyle to add background-image? My code doesn't work: this.photo = 'http://dl27.fotosklad.org.ua/20121020/6d0d7b1596285466e8bb06114a88c903.jpg'; <div [ngStyle]="{'background-image': url(' + photo + ')}"></div>

Read More
How to get on scroll events?

I need to get scroll events from a div with overflow: scroll in my Angular 2 app. It seems onscroll event do not works on Angular 2. How could I achieve that?

Read More