Allow custom classes for PerfectScrollbar container and elements

[tibineagu]

I've been recently trying to use PerfectScrollbar with a Chrome Extension that renders some content in Gmail.

What happens, however, is that Gmail already defines their own .ps class, which interferes with the styling for the custom scrollbars:

For this case in particular, we were able to work around the issue by manually setting padding and margin to 0 !important directly in the style attribute of our elements, but it's extremely convoluted and requires us to be very verbose with containers.

I think a more approachable solution would be to allow developers to define their own set of classes to be applied to the scrollbar container and its elements, something like this:

const ps = new PerfectScrollbar('#container', {
    classes: {
        main: 'custom-ps',
        element: {
            thumb: x => `custom__thumb-${x}`,
        },
    },
});

It would then be at the developers' liberty to rename the classes in a custom style file.

---

Make sure these boxes are checked before submitting your issue -- thank you!

• [x] Check FAQ and Caveats
• [x] Search if there's already one reported in Issues
• [ ] Prepare a JSFiddle reproducing the issue
  • perfect-scrollbar JSFiddle
• [ ] Provide a page or source code where the issue can be checked

[tibineagu]

@mdbootstrap I've opened mdbootstrap/Tailwind-Elements#886 to partially solve this.

I'm happy to make any alterations you think necessary in order to get this live.