使滚动始终显示在材料选择中答案

【问题标题】：Make Scroll Always Show In Material Select使滚动始终显示在材料选择中
【发布时间】：2020-05-05 18:26:34
【问题描述】：

我正在一个 Angular 9 项目中工作，使用 Material（SCSS 样式表）。

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

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

现在显示的是：

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

我也快速发了一个https://stackblitz.com/edit/always-show-scroll-material-select

【问题讨论】：

对于任何认为 Dailos Medina 的答案有效的人，您可以在上面的 stackblitz 中看到它的示例。

标签： css angular sass angular-material

【解决方案1】：

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

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

在这篇文章中还解释了： Preventing scroll bars from being hidden for MacOS trackpad users in WebKit/Blink

在您的特定情况下，您可以使用这些 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);
}

【讨论】：

谢谢！这让我可以在选择中设置滚动样式。我正在使用无线鼠标，并且滚动会显示，但只有当我通过滚动激活它时才会显示。现在它总是显示。