Angular material 滚动条问题

Question

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

我正在尝试 angular material 滚动条看起来像附图中那样。但是我不知道该怎么做。

Answer 1

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

您可以使用此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

Angular material 滚动条问题

Angular material Scrollbar issue

angular-material

angular7