This commit is contained in:
tiago.kayaya
2021-09-24 15:39:25 +01:00
parent 77cb5ad73b
commit 45197375ff
6 changed files with 107 additions and 11 deletions
@@ -98,6 +98,22 @@
</div>
</div>
</div>
<ion-fab horizontal="end" vertical="bottom" slot="fixed">
<ion-fab-button *ngIf="scrollToBottomBtn" (click)="scrollToBottomClicked()" color="light" size="small">
<ion-icon name="chevron-down"></ion-icon>
</ion-fab-button>
<!-- <ion-fab-list side="start">
<ion-fab-button color="light">
<ion-icon name="chevron-down"></ion-icon>
</ion-fab-button>
<ion-fab-button color="light">
<ion-icon name="logo-twitter"></ion-icon>
</ion-fab-button>
<ion-fab-button color="light">
<ion-icon name="logo-vimeo"></ion-icon>
</ion-fab-button>
</ion-fab-list> -->
</ion-fab>
</ion-content>
@@ -54,6 +54,7 @@ export class GroupMessagesPage implements OnInit, OnChanges, AfterViewInit, OnDe
private scrollChangeCallback: () => void;
currentPosition: any;
startPosition: number;
scrollToBottomBtn = false;
@Input() roomId:string;
@Output() closeAllDesktopComponents:EventEmitter<any> = new EventEmitter<any>();
@@ -158,20 +159,35 @@ export class GroupMessagesPage implements OnInit, OnChanges, AfterViewInit, OnDe
} catch(err) { }
}
scrollToBottomClicked(): void {
try {
this.myScrollContainer.nativeElement.scrollTop = this.myScrollContainer.nativeElement.scrollHeight;
} catch(err) { }
}
ngAfterViewInit() {
this.scrollChangeCallback = () => this.onContentScrolled(event);
window.addEventListener('scroll', this.scrollChangeCallback, true);
}
onContentScrolled(e) {
onContentScrolled(e) {
this.startPosition = e.srcElement.scrollTop;
let scroll = e.srcElement.scrollTop;
let windowHeight = e.srcElement.scrollHeight;
let containerHeight = windowHeight - 454.199951171875;
if (scroll > this.currentPosition) {
//this.showButton = false;
//alert('BOTTOM');
} else {
//this.showButton = true;
//alert('UP');
this.scrollingOnce = false;
}
if((containerHeight - 100) > scroll){
this.scrollToBottomBtn = true;
}
else{
this.scrollToBottomBtn = false;
}
this.currentPosition = scroll;
}