angular 如何调用ngx-perfect-scrollbar update() 和ScrollTop() 方法？

Question

我正在使用 "ngx-perfect-scrollbar": "^5.3.5"。我将描述添加为 "See More" 和 "See Less" 并且页面上有滚动条。当执行 "See More" 和 "See Less" 单击操作时，完美的滚动条不会自行更新，并且底部会保留一个额外的空白。

.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

Answer 2

尝试对您的组件使用以下方法：

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

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

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

angular 如何调用ngx-perfect-scrollbar update() 和ScrollTop() 方法？

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

javascript

perfect-scrollbar

angular

.html

.ts