角材质滚动条问题

Question

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

我正在尝试如上图所示的有角度的材料转向灯外观。但是我不知道该怎么做。

Answer 1

默认情况下，材质不提供任何样式来更改滚动

您可以使用此CSS更改滚动条样式

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演示：https://stackblitz.com/edit/angular-jkw9ac