Styling ionic v4 scroll bar in ionic pwa

Ionic Framework
1

I tried all day and could not find a solution to style the scrollbar. I know it autohides in device but we are talking about PWA. The inherited scrollbar looks ugly. I have tried evrything. The “.inner-scroll” class takes “::-webkit-scrollbar” property but in ionic4 “.inner-scroll” seems to be hidden in shadow root. I think I am being dumb or ionic team have not thought of it yet.

3 Likes
2

Were you able to resolve the issue? I’m stuck on the same problem.

3

This works for me in both ionic3 and ionic4 (put it in src/global.scss):

ion-app {
    .scroll-content {
        // prevent scrollbars from showing up in desktop browsers
        // in the side-menu and in the main content window
        overflow-y: auto;
    }
}
4

@doron Thanks for your reply.

But I think the question was about customizing the default scrollbar (like adjusting the width of the scrollbar or changing the color of it) with the help of css.

There is an open ticket in the ionic team repo, for this problem

1 Like
5

As anyone found a solution?

I am using the latest version of Ionic 4.6.0 and I am having difficulty applying styles to the scrollbar for the entire application in IonContent and other elements that may have scroll.

1 Like
6

Here is the custom styling scrollbar

7

Yes I ended up creating a solution for all. Use this package “ion-custom-scrollbar”

1 Like
8

I created a library for this. Use https://www.npmjs.com/package/ion-custom-scrollbar

1 Like
9

@juny58 This is a great package unfournatly this work only for angular, when i tried this for vueJs… it showed me a dependency for @angular…
Maybe you can tweak this to work with all the langs Ionic supports…