CODEWITHSUNDEEP
javascriptangularperfect-scrollbar
Manzer A
Manzer A

Reputation: 3826

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

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

}

Upvotes: 2

Views: 11265

Answers (2)

Shohel
Shohel

Reputation: 3934

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

Upvotes: 2

Gurpreet Singh
Gurpreet Singh

Reputation: 3121

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

Upvotes: 4

Related Questions