1

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.

Mahi
  • 3,748
  • 4
  • 35
  • 70

1 Answers1

3

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

Just code
  • 13,553
  • 10
  • 51
  • 93
  • 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. – Mahi Nov 22 '18 at 09:48
  • @Ahmadmnzr not a bug but, as many items are there it moves slowly – Just code Nov 22 '18 at 09:50
  • @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? – N Fard Jul 05 '20 at 00:50
  • @NaeimFard I did not, Can you explain more? – Just code Jul 05 '20 at 09:22
  • @Justcode https://stackblitz.com/edit/angular-jkw9ac-dpnnaw drag scroll thumb by mouse to see the difference – N Fard Jul 09 '20 at 09:03
  • @Justcode posted as a question here : https://stackoverflow.com/questions/62811427/angular-virtual-scroll-performance-issue-on-overriding-scrollbar-styles – N Fard Jul 09 '20 at 09:13
  • Which browser are you using? I used chrome works fine – Just code Jul 10 '20 at 02:33