Make perfect scrollbar visible by default

javascript jquery css custom-scrolling
user6725932 picture user6725932 · Nov 11, 2016 · Viewed 25.1k times · Source

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

Answer

Vanquished Wombat picture Vanquished Wombat · Nov 11, 2016

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>

Related questions

How do I add a class to a given element?

I have an element that already has a class: <div class="someclass"> <img ... id="image1" name="image1" /> </div> Now I want to create a JavaScript function that will add a class to the div (…

Read More
How can I remove a style added with .css() function?

I'm changing CSS with jQuery and I wish to remove the styling I'm adding based on the input value: if(color != '000000') $("body").css("background-color", color); else // remove style ? How can I do this? Note that the line above …

Read More
Refresh/reload the content in Div using jquery/ajax

I want to reload a div on click of a button. I do not want to reload the full page. Here is my code: HTML: <div role="button" class="marginTop50 marginBottom"> <input type="button" id="getCameraSerialNumbers" value="…

Read More