javascript - 如何在 Angular 中调用 ngx-perfect-scrollbar update() 和 ScrollTop() 方法？

Question

我正在使用"ngx-perfect-scrollbar": "^5.3.5"。我添加了“查看更多”和“查看更少”的描述，并且页面上有滚动。当执行“查看更多”和“查看更少”点击操作时，完美的滚动条不会自行更新，并且底部仍然存在额外的空白。

.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

}   

Answer 1

你可以这样使用

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

内部组件文件

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

@ViewChild('perfectScroll') perfectScroll: PerfectScrollbarComponent;

现在您可以在要更新滚动的方法中使用它

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