Angular material Scrollbar issue

0
votes

enter image description here

Link:- https://stackblitz.com/angular/qmedkbvramy?file=app%2Fcdk-virtual-scroll-overview-example.ts

I am trying angular material scollbar look as in the attached picture. But I can't figure out, how to do this.

1
angular-materialangular7
I don't think material provides a native way to style this one, you need to use css to achieve the desire result. - Just code
Thanks, Can you help me with desired css. - MαHi

1 Answers

2
votes

Material by default doesn't provide any styles to change the scrolling

You can use this css to change the scrollbar style

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

cdk-virtual-scroll-viewport::-webkit-scrollbar
{
    width: 12px;
    background-color: #F5F5F5;
}

cdk-virtual-scroll-viewport::-webkit-scrollbar-thumb
{
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
    background-color: #555;
}

Stackblitz demo: https://stackblitz.com/edit/angular-jkw9ac