角材料滚动条问题答案

【问题标题】：Angular material Scrollbar issue角材料滚动条问题
【发布时间】：2019-04-24 19:53:41
【问题描述】：

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

我正在尝试附件图片中的角度材料 scollbar 外观。但我不知道该怎么做。

【问题讨论】：

我不认为 material 提供了一种原生的方式来设置这个样式，你需要使用 css 来实现期望的结果。
谢谢，你能帮我解决所需的 css 吗？

标签： angular-material angular7

【解决方案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

【讨论】：

谢谢，有一个问题 - 列表正在上升，但随着列表的上升，相应的滚动并没有移动。它有点错误或什么的。
@Ahmadmnzr 不是错误，但由于项目很多，它移动缓慢
@Justcode 你注意到滚动条闪烁的问题了吗？当我们覆盖滚动条样式时，它不会在滚动时闪烁。但似乎性能有所不同。知道为什么会这样吗？
@NaeimFard 我没有，你能解释更多吗？
@Justcode stackblitz.com/edit/angular-jkw9ac-dpnnaw 用鼠标拖动滚动拇指查看区别