Styling ionic v4 scroll bar in ionic pwa


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


#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