Css 使滚动始终显示在“材质选择”中

我在Angular 9项目中工作，使用材质（SCSS样式表）

我有一个材料选择，有许多选项，所以你可以滚动通过它们。问题是，除非您知道还有其他选项，或者碰巧尝试了滚动，否则您不会知道列表已扩展。我想通过始终显示滚动条来解决这个问题

如何使滚动条在“材质选择”元素中始终可见。我猜我会使用某种风格。我也在使用scss样式表

以下是现在所展示的内容：

我希望滚动始终显示，而不仅仅是当您向下滚动元素时：

---

我还做了一个快速的

滚动条没有显示，因为您可能正在使用触控板或魔术鼠标。使用外部鼠标将显示滚动条，仅将“溢出”设置为“自动”或“滚动”

如果您还想使用触摸板或魔术鼠标来显示滚动条，您仍然可以使用-webkit scrollbar伪元素来显示滚动条

在这篇文章中还解释了：

在您的特定情况下，您可以使用以下css行实现这一点：

::ng-deep .mat-select-panel::-webkit-scrollbar {
    -webkit-appearance: none;
}

::ng-deep .mat-select-panel::-webkit-scrollbar:vertical {
    width: 11px;
}

::ng-deep .mat-select-panel::-webkit-scrollbar:horizontal {
    height: 11px;
}

::ng-deep .mat-select-panel::-webkit-scrollbar-thumb {
    border-radius: 8px;
    border: 2px solid white; /* should match background, can't be transparent */
    background-color: rgba(0, 0, 0, .5);
}

---

滚动条不显示，因为您可能正在使用触控板或魔术鼠标。使用外部鼠标将显示滚动条，仅将“溢出”设置为“自动”或“滚动”

如果您还想使用触摸板或魔术鼠标来显示滚动条，您仍然可以使用-webkit scrollbar伪元素来显示滚动条

在这篇文章中还解释了：

在您的特定情况下，您可以使用以下css行实现这一点：

::ng-deep .mat-select-panel::-webkit-scrollbar {
    -webkit-appearance: none;
}

::ng-deep .mat-select-panel::-webkit-scrollbar:vertical {
    width: 11px;
}

::ng-deep .mat-select-panel::-webkit-scrollbar:horizontal {
    height: 11px;
}

::ng-deep .mat-select-panel::-webkit-scrollbar-thumb {
    border-radius: 8px;
    border: 2px solid white; /* should match background, can't be transparent */
    background-color: rgba(0, 0, 0, .5);
}

---

谢谢这让我可以在选择中设置滚动条的样式。我使用的是无线鼠标，滚动条会显示出来，但只有当我通过滚动激活它时才会显示。现在它总是显示出来。谢谢！这让我可以在选择中设置滚动条的样式。我使用的是无线鼠标，滚动条会显示出来，但只有当我通过滚动激活它时才会显示。现在它总是显示出来。对于任何一个寻找Dailos Medina答案的人来说，答案是有效的，你可以在上面的stackblitz中看到它的例子。对于任何一个寻找Dailos Medina答案的人来说，答案是有效的，你可以在上面的stackblitz中看到它的例子。