使 ngx-perfect-scrollbar 默认可见

Question

我在 div 元素上使用 ngx-perfect-scrollbar，如下所示：

<div [perfectScrollbar]="config" [ngStyle]="{ 'max-height': '60vh', position: 'relative' }">
.
.
.
.
</div>

但是只有当我将鼠标悬停在滚动条的 div 元素上时，滚动条才可见。我如何让它一直可见？

Answer 1

我通过将以下样式添加到全局 styles.scss

来解决问题

.ps > .ps__rail-x,
.ps > .ps__rail-y {
  opacity: 0.6;
}

这些样式应用于 perfect-scrollbar，因为 ngx-perfect-scrollbar 在幕后使用 perfect-scrollbar。

Answer 2

完美的滚动条被不透明度隐藏了。

你可以给出已经声明的完美滚动条class:

ps-show-always

其中添加了这个：

perfect-scrollbar.ps-show-always > .ps.ps--active-y > .ps__rail-y,
perfect-scrollbar.ps-show-always > .ps.ps--active-x > .ps__rail-x {
  opacity: 0.6;
}

使 ngx-perfect-scrollbar 默认可见

Make ngx-perfect-scrollbar visible by default

angular

angular-material

perfect-scrollbar