How to customize perfect-scrollbar width

Question

I am using perfect-scrollbar. The documentation says, that the scrollbar is fully customizable, but there is no such setting like width

This is how it looks default: , and it is only 8px width.

But I need at least 12px:

How to achieve this?

Answer 1

Change the CSS:

Width and height.

There's no harm in including your own stylesheet, in fact, it's expected. That way you can style it however you want (not just thickness of the bar, but color and so on). Just download the unminimized verison from GitHub and include it on your page with any tweaks you want.

Or you can override the values with javascript/jQuery.

Answer 2

To those using Angular 2+, if you find that you're unable to style the perfect-scrollbar with SCSS, add the prefix ::ng-deep before your selector. For example, in componentname.component.scss add

::ng-deep perfect-scrollbar > div > div.ps__rail-y {
  //styles go here
}