ngx-perfect-scrollbar显示隐藏页脚

时间:2019-10-08 11:50:37

标签: angular scroll footer

我正在尝试根据滚动方式使页脚向内/向外滑动。 到目前为止,我唯一需要做的就是用 psYReachEnd 显示页脚,但是当我向上滚动100px时,如何“告诉”页脚向后滑出?

public onReachEnd(): void {
this.zone.run(() => {
  this.status = true;
});
console.log('show footer');}




<perfect-scrollbar (psYReachEnd)="onReachEnd()"><div>content</div><div id="footer" class="container-fluid" [ngClass]="status ? 'show' : 'hide'">footer content</div></perfect-scrollbar>

1 个答案:

答案 0 :(得分:0)

最后想通了。如果有人对此感兴趣,这是可行的解决方案(对我来说)

constructor(private zone: NgZone) {}

status = false;

@HostListener('scroll', ['$event'])
onScrollY(event) {
if (event.target.offsetHeight + event.target.scrollTop >= event.target.scrollHeight) {
  this.zone.run(() => {
    this.status = true;
  });
} else {
  this.zone.run(() => {
   this.status = false;
 });
}
}




<perfect-scrollbar (psScrollY)="onScrollY($event)">
   <div [ngClass]="status ? 'show' : 'hide'">content</div>
</perfect-scrollbar>

ps:如果还有其他Angular解决方案,请发布

相关问题