如何使滚动条在角形材料中始终可见? [英] How to make scrollbar always visible in angular material?

问题描述

因此，目前，我正在使用角形材质及其默认滚动条(但我认为这是完美的滚动条)，可以用作滚动条的滚动设计.但是，滚动仅在用户尝试滚动页面/div时显示.我试图阅读Angular Material的滚动api，但是这里没有可以使用的属性.当然，我已经将overflow-y: scroll放在了CSS上.任何的想法?谢谢！

So currently, I'm using angular material and its default scroll (But I think it is perfect scrollbar) to use as a scroll design to my scroll bar. But the scroll is only showing if the users try to scroll the page/div. I tried to read the scrolling api of the Angular Material but there's no attribute that I can use in here. And I do already put the overflow-y: scroll on the css of course. Any idea? Thanks!

推荐答案

所以我找到了解决方法，我需要将其包含到我的CSS中

So I found a work around, I need to include this to my CSS

::-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);
}

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

And if you need it to a specific element or container

.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滚动条样式应用于指定元素

这篇关于如何使滚动条在角形材料中始终可见?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！