CODEWITHSUNDEEP
angular-materialangular7
Manzer A
Manzer A

Reputation: 3826

Angular material Scrollbar issue

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.

Upvotes: 1

Views: 4482

Answers (1)

Just code
Just code

Reputation: 13801

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

Upvotes: 3

Related Questions