Make ngx-perfect-scrollbar visible by default

Question

I am using ngx-perfect-scrollbar on div element like this:

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

But the scrollbar is visible only when I hover mouse over the div element of scrollbar. How do I make this visible all the time?

Answer 1

Perfect scrollbar is hidden by opacity.

You can give perfect scrollbar already declared class:

ps-show-always

Which adds this:

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

I fixed problem by adding the following styles to my global styles.scss

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

These styles are applied on perfect-scrollbar, as ngx-perfect-scrollbar is using perfect-scrollbar behind the scene.