admin管理员组

文章数量:1326447

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

Share Improve this question Follow edited Jul 26, 2019 at 13:09 Manzer A asked Jul 25, 2019 at 5:25 Manzer AManzer A 3,82666 gold badges3939 silver badges7979 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 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

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

本文标签： javascriptHow to call ngxperfectscrollbar update() and ScrollTop() method in angularStack Overflow