How can I change the appearance of the scrollbars?
The appearance of the scrollbars are independent from JavaScript, but depend on stylesheet. You can freely change the stylesheet perfect-scrollbar.css as you want.
How can I make the scrollbars always visible?
The reason why it's hidden by default is that opacity: 0 is used. Please change the opacity style to 0.6. An example code may be helpful to see how.
.ps > .ps__rail-x,
.ps > .ps__rail-y {
opacity: 0.6;
}
Surely, you can completely modify the styles too.
Scrollbar doesn't show until being scrolled.
The main reason of this problem is a timing issue. It means that the content is filled after the scrollbar is initialised, usually because of AJAX or other asynchronous actions. Please check if the content is fully loaded before the scrollbar is initialised. If the content is updated after the initialisation, please call .update() to update the geometry of the scrollbars.
Scrollbar isn't loaded well.
There could be several reasons for this issue. Please check if the plugin is loaded well with browser inspector tools.
One suggestion is to watch your build tools. Some plugin like bower_concat may cause the problem. Please refer to an issue concerning the case.
Scrolling children inside perfect-scrollbar
You can natively scroll children inside perfect-scrollbar with the mouse-wheel. If a child can be scrolled, it will be scrolled as usual. If the child should always consume regardless of its overflow, please add a class ps__child--consume.
Error: perfect_scrollbar_*.default is not a constructor
perfect-scrollbar provides 2 types of export, one for CommonJS and the other for ES modules. They are specified in main and module fields in package.json, and any build system should tell which script to use. If the error occurs, it may be a build-tool issue. The error can be workarounded with any of followings:
import * as PerfectScrollbar from 'perfect-scrollbar';
const PerfectScrollbar = require('perfect-scrollbar');