6

I am using perfect scrollbar for custom scroll bar. It is working fine.

But the scrollbar is visible only when you mouse over on the container.

How do I make this visible all the time?

$('.container').perfectScrollbar();

Demo

user6725932
  • 333
  • 1
  • 3
  • 16

7 Answers7

10

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>
Vanquished Wombat
  • 9,075
  • 5
  • 28
  • 67
3

In addition you have to make sure perfect-scrollbar is updated at the right time. If the content is loaded dynamically, call ps.update().

Warning, make sure the the call is made after your data is loaded, on VueJS I had to do it in the 'nextTick' function :

    this.$nextTick(() => {
          ps.update();
      });
    },

I guess a timeout may works too.

FloFu
  • 609
  • 1
  • 5
  • 21
2
 .ps__rail-x,
.ps__rail-y {
  opacity: 0.6;
}

This worked for me.

Dhanushka Weerasinghe
  • 167
  • 2
  • 11
0

Try this. This will work even if the container class doesn't exist in you application

.ps> .ps__scrollbar-x-rail, .ps> .ps__scrollbar-y-rail{
    opacity: 0.6;
}
sujithuix
  • 264
  • 3
  • 8
0

I'm using ngx-perfect-scrollbar in Angular 8 and fixed problem by adding the following styles

.ps > .ps__rail-x,
.ps > .ps__rail-y {
  opacity: 0.6;
}
DevLoverUmar
  • 11,809
  • 11
  • 68
  • 98
-1
<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <title>perfect-scrollbar example</title>
    <link href="../dist/css/perfect-scrollbar.css" rel="stylesheet">
    <script src="../dist/js/perfect-scrollbar.js"></script>
    <style>
      h1 { text-align: center; }
      .container { position:relative; margin:0px auto; padding:0px; width: 600px; height: 400px; overflow: auto; }
      .container .content { background-color: red; width: 1280px; height: 720px; }
    </style>
    <style>
      /* to make scrollbars always visible */
      .always-visible.ps-container > .ps-scrollbar-x-rail,
      .always-visible.ps-container > .ps-scrollbar-y-rail {
        opacity: 0.6;
      }
    </style>
  </head>
  <body>
    <h1>Default</h1>
    <div class="container">
      <div class="content">
      </div>
    </div>

    <h1>Always visible</h1>
    <div class="container always-visible">
      <div class="content">
      </div>
    </div>
    <script>
      window.onload = function () {
        [].forEach.call(document.querySelectorAll('.container'), function (el) {
          Ps.initialize(el);
        });
      };
    </script>
  </body>
</html>
MarcoS
  • 17,323
  • 24
  • 96
  • 174
-1

I had the same issue. Make sure you are rendering the content first and after that you are creating the scrollbars. No CSS changes are needed. I'm using perfect-scrollbar.jquery.js

Luis Hernandez
  • 453
  • 5
  • 8