如何在Angular Material中使滚动条始终可见？

Question

目前，我正在使用Angular Material和其默认的滚动条（但我认为它是完美的滚动条）作为我的滚动条设计。但是，只有当用户尝试滚动页面/ div时，滚动条才会显示出来。我尝试阅读Angular Material的滚动API，但这里没有我可以使用的属性。当然，我已经在CSS中添加了overflow-y: scroll。有什么想法吗？谢谢！

- Rich

Answer 1

所以我找到了一个解决方法，我需要在我的CSS中包含pseudo类。

::-webkit-scrollbar {
  -webkit-appearance: none;
  width: 7px;
}
::-webkit-scrollbar-thumb {
  border-radius: 4px;
  background-color: rgba(0, 0, 0, .5);
  -webkit-box-shadow: 0 0 1px rgba(255, 255, 255, .5);
}

如果您需要将其应用于特定元素或容器

.selectionTable::-webkit-scrollbar {
    -webkit-appearance: none;
    width: 7px;
}

.selectionTable::-webkit-scrollbar-thumb {
    border-radius: 4px;
    background-color: rgba(0, 0, 0, .5);
    -webkit-box-shadow: 0 0 1px rgba(255, 255, 255, .5);
}

参考：

使主滚动条始终可见

将Webkit滚动条样式应用于指定元素

- Rich

---

@VikasJadhav 不错的观点。但是谁会在使用Angular 7时针对旧浏览器呢？ - Rich

如果你认为没有人在使用 Angular 7 的旧浏览器，那就按照你的方法去做吧...因为许多大型组织仍在使用旧版本。 - Vikas Jadhav

这是一个非标准功能，它在某些浏览器、平板电脑和手机上无法正常工作（https://developer.mozilla.org/en-US/docs/Web/CSS/::-webkit-scrollbar）。目前没有稳定的CSS解决方案。唯一跨平台的方法是使用JS来处理它。 - Davor