From the perfectscrollbar wiki:

How can I make the scrollbars always visible?

The reason why it's hidden by default is that opacity: 0 is used.
Please change all references of it to opacity: 0.6. If using .scss,
modify the line @include opacity(0) to @include opacity(0.6) in the
scrollbar-rail-default mixin and run gulp build to build .css and
.min.css files.

If you're not willing to modify the CSS files but would like to make
it always visible, please add following lines anywhere after
perfect-scrollbar.css is loaded.

.ps-container > .ps-scrollbar-x-rail,
.ps-container > .ps-scrollbar-y-rail { opacity: 0.6; }

Also, an example code may be helpful to see how to achieve it.

Here is example https://github.com/noraesae/perfect-scrollbar/blob/master/examples/always-visible.html

So, if you modify your JSFiddle by pasting the following into your html, it works.

<div class=container>

  <div class=content></div>

</div>



<style>

    .ps-container > .ps-scrollbar-x-rail,

    .ps-container > .ps-scrollbar-y-rail {   opacity: 0.6; }

 </style>