How to style the scroll bar in ionic

Ionic Framework ionic-v3
1

I have added the below code in app.scss but its not working. Please help me this.

body::-webkit-scrollbar-track
{
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3) !important;
border-radius: 10px!important;
background-color: #F5F5F5!important;
}

body::-webkit-scrollbar
{
width: 10px!important;
background-color: #F5F5F5!important;
}

body::-webkit-scrollbar-thumb
{
border-radius: 10px!important;
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3)!important;
background-color: #D62929!important;
}

2

remove the body from the scrollbar styling. Use directly

::-webkit-scrollbar-track
{
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3) !important;
border-radius: 10px!important;
background-color: #F5F5F5!important;
}

::-webkit-scrollbar
{
width: 10px!important;
background-color: #F5F5F5!important;
}

::-webkit-scrollbar-thumb
{
border-radius: 10px!important;
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3)!important;
background-color: #D62929!important;
}
1 Like
3

Hi I have added the same thing for the app.scss in Ionic 4 version but its not working any idea why ?

4

I’ve got the same issue in Ionic 4. Anybody got it right ?