angular - 使 ngx-perfect-scrollbar 默认可见

Question

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

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

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

Answer 1

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

你可以给完美的滚动条已经声明的类：

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

Answer 2

我通过将以下样式添加到我的全局 styles.scss 来解决问题

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

这些样式应用于完美滚动条，因为 ngx-perfect-scrollbar 在幕后使用完美滚动条。