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.
2
-
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– Just code2018-11-22 07:29:37 +00:00Commented Nov 22, 2018 at 7:29
-
Thanks, Can you help me with desired css.Ahmad– Ahmad2018-11-22 07:32:37 +00:00Commented Nov 22, 2018 at 7:32
Add a comment
|
1 Answer
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
7 Comments
Ahmad
Thanks, one issue is there- list is going up but corresponding scroll is not moving as the list goes up. Its kinda bug or something.
Just code
@Ahmadmnzr not a bug but, as many items are there it moves slowly
N Fard
@Justcode did you notice the flashing issue on scroll? when we override scrollbar styles, it's not flashing on scrolling.but it seems the performance is different. any idea why this is happening?
Just code
@NaeimFard I did not, Can you explain more?
N Fard
@Justcode stackblitz.com/edit/angular-jkw9ac-dpnnaw drag scroll thumb by mouse to see the difference
|
