Perfect-scrollbar: perfect_scrollbar_1.default is not a constructor

[costea93]

In my component i'm trying to initialize the scrollbar after view init

ngAfterViewInit() { this.scrollContainer = this.elemRef.nativeElement.querySelector('.scroll-content'); const ps = new PerfectScrollbar(this.scrollContainer); }

and i got this error: perfect_scrollbar_1.default is not a constructor, what's wrong here?

[hatashiro]

Which version of PS are you using? What is your build env?

FYI:

PS provides 2 types of export, one for CommonJS and the other for ES modules:

• https://github.com/utatti/perfect-scrollbar/blob/master/dist/perfect-scrollbar.common.js
• https://github.com/utatti/perfect-scrollbar/blob/master/dist/perfect-scrollbar.esm.js

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');

[costea93]

@utatti, thanks for answer, the error will disappear if use this option:
const PerfectScrollbar = require('perfect-scrollbar');

But the scroll but doesn't appear when i scroll, it's always hidden. I checked the css classes, and it's always: "ps ps--active-y", the css styles i also can see, but the scroll but doesn't appear when i scroll, do you know what problem might be in this case?

Thanks a lot!

[hatashiro]

Please check if perfect-scrollbar.css is correctly imported, and style requirements meet?

[costea93]

Heh, it works and it's nice, but with PS doesn't work more element.scrollIntoView({ behavior: 'smooth' })

Whatever, thanks for help!

[hatashiro]

Hmm, if element.scrollIntoView({ behavior: 'smooth' }) fires scroll events, it should work either. Anyway, good to hear that the original issue has been resolved.

[costea93]

For multiple elements on page with scroll it won't work ok, because, it'll be initialized just for first element, it can be fixed easy by this way:

const containers = Array.from(document.querySelectorAll('#selector')); containers.forEach(elem => new PerfectScrollbar(elem));