时间戳

首页 > 解决方案 > 如何以角度调用 ngx-perfect-scrollbar update() 和 ScrollTop() 方法？

javascript - 如何以角度调用 ngx-perfect-scrollbar update() 和 ScrollTop() 方法？

问题描述

我正在使用"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

}

标签： javascriptangularperfect-scrollbar

解决方案

你可以这样使用

<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

推荐阅读