ngx-perfect-scrollbar: How to reference to the directive from typescript?

Question

I'm using ngx-perfect-scrollbar with my Angular 5 project. I want to scroll the div to top when the route changes.

dashboard.html

<div class="main-panel" [perfectScrollbar] #perfectscroll>
    <router-outlet></router-outlet>
</div>

dashboard.ts

@Component({
    selector: 'app-dashboard',
    templateUrl: './dashboard.component.html',
})
export class DashboardComponent implements OnInit {
    @ViewChild('perfectscroll') perfectscroll: PerfectScrollbarDirective;

    ngOnInit() {
        this.router.events.subscribe((evt) => {
            if (!(evt instanceof NavigationEnd)) {
                return;
            }
            this.perfectscroll.scrollToTop()
        });
    }
}

But I get this error :

TypeError: _this.perfectscroll.scrollToTop is not a function

does this problem solved? Kindly post or accept the solution. — Mahi, Jul 29 '19 at 07:33

score 6 · Answer 1 · answered Feb 18 '19 at 21:32

Look at my working example.

In the trmplate:

<div class="perfectScroll" [perfectScrollbar] #psLeft="ngxPerfectScrollbar">...</div>
...
<div class="perfectScroll" [perfectScrollbar] #psRight="ngxPerfectScrollbar">...</div>

...

In the component:

@ViewChild('psLeft') psLeft: PerfectScrollbarDirective;
@ViewChild('psRight') psRight: PerfectScrollbarDirective;
...
if (this.psRight) {
    this.psRight.scrollToTop();
}

score 2 · Answer 2 · answered Jun 21 '18 at 10:59

2

just use this: @ViewChild(PerfectScrollbarDirective) perfectscroll: PerfectScrollbarDirective;

you will have instance and then you can call functions like scrollToTop()

answered Jun 21 '18 at 10:59

D013

21
2

1

But what if I have multiple scrollbars on the page? – Anton Pegov Feb 18 '19 at 21:18

score 0 · Answer 3 · answered Jun 09 '20 at 07:37

0

All of these solutions didn't work for me. I've fixed like below

scrollUp(): void {
  const container = document.querySelector('.main-panel');
  container.scrollTop = 0;
}

answered Jun 09 '20 at 07:37

Mumin Ka

725
9
19

score 0 · Answer 4 · answered Feb 11 '22 at 21:17

0

It worked for me

  @ViewChild(PerfectScrollbarDirective, { static: false }) perfectScrollbarDirectiveRef?: PerfectScrollbarDirective;

answered Feb 11 '22 at 21:17

Gustavo Barros

116
1
7

ngx-perfect-scrollbar: How to reference to the directive from typescript?

4 Answers4