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

}   

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

}   

• javascript
• angular
• perfect-scrollbar

2 Answers 2

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

Try to use the following ways to your ponent:

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

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

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