How to call ngx-perfect-scrollbar update() and ScrollTop() method in angular?

Question

I am using "ngx-perfect-scrollbar": "^5.3.5". I am adding the description as "See More" and "See Less" and there is scroll on the page. When performing "See More" and "See Less" click action, perfect Scrollbar is not updating itself and there remains a extra whitespace at the bottom.

.html

<div class="col-12 ps" [perfectScrollbar]="scrollConfig">
<div class="seeMoreContent" *ngIf="seeMore === true">
---
----
---
</div>
<div class="seeLessContent" *ngIf="seeMore === false">
---
----
---
</div>
 <span (click)="updateSeeMore('seeMore')" class="seeMore">
See more</span>
<span (click)="updateSeeMore('seeLess')" class="seeLess">
  See Less
</span>
</div>

.ts

scrollConfig = {
    suppressScrollX: false,
    suppressScrollY: false
};

updateSeeMore(type){
if(type === 'seemore'){
 this.seeMore = true;
}else{
 this.seeMore = false;
}
// Want to update the scroll here

}

score 4 · Accepted Answer · answered Jul 25 '19 at 05:35

4

You can use like this

<perfect-scrollbar
                #perfectScroll
                [config]="psConfig"
                [scrollIndicators]="true"
                (psScrollY)="onListScroll()">
</perfect-scrollbar>

Inside Component file

import { PerfectScrollbarConfigInterface, PerfectScrollbarComponent } from 'ngx-perfect-scrollbar';

@ViewChild('perfectScroll') perfectScroll: PerfectScrollbarComponent;

Now you can use this inside your method where you want to update scroll

this.perfectScroll.directiveRef.update(); //for update scroll
this.perfectScroll.directiveRef.scrollToTop(offset?, speed?); //for update scroll

answered Jul 25 '19 at 05:35

Gurpreet Singh

3,061
5
19
36

But, here I am using it in different way and how should I implement it in above scenario. – Mahi Jul 25 '19 at 06:28
1

Geeting error as:- Cannot read property 'update' of undefined – Mahi Jul 29 '19 at 09:40
1

My scroll is not working on key press and that is because I do not have focus over the div surrounded by perfect-scrollbar initially. I want the scroll to work with key press without manually setting the focus by mouse. – Vijender Kumar Jan 02 '20 at 12:41

score 2 · Answer 2 · answered Aug 20 '19 at 08:07

Try to use the following ways to your component:

import { PerfectScrollbarDirective } from 'ngx-perfect-scrollbar';

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

this.perfectScrollbarDirectiveRef.update();
this.perfectScrollbarDirectiveRef.scrollToTop(0, 1);

How to call ngx-perfect-scrollbar update() and ScrollTop() method in angular?

.html

.ts

2 Answers2