Check if user has scrolled to the bottom in Angular 2
// You can use this.
@HostListener("window:scroll", [])
onScroll(): void {
if ((window.innerHeight + window.scrollY) >= document.body.offsetHeight) {
// you're at the bottom of the page
}
}
For me the bottom of my chatbox wasn't at the bottom of the page, so I couldn't use window.innerHeight to see if the user scrolled to the bottom of the chatbox. (My goal was to always scroll to the bottom of the chat unless the user is trying to scroll up)
I used the following instead which worked perfectly:
let atBottom = element.scrollHeight - element.scrollTop === element.clientHeight
some context:
@ViewChild('scrollMe') private myScrollContainer: ElementRef;
disableScrollDown = false
ngAfterViewChecked() {
this.scrollToBottom();
}
private onScroll() {
let element = this.myScrollContainer.nativeElement
let atBottom = element.scrollHeight - element.scrollTop === element.clientHeight
if (this.disableScrollDown && atBottom) {
this.disableScrollDown = false
} else {
this.disableScrollDown = true
}
}
private scrollToBottom(): void {
if (this.disableScrollDown) {
return
}
try {
this.myScrollContainer.nativeElement.scrollTop = this.myScrollContainer.nativeElement.scrollHeight;
} catch(err) { }
}
and
<div class="messages-box" #scrollMe (scroll)="onScroll()">
<app-message [message]="message" *ngFor="let message of messages.slice().reverse()"></app-message>
</div>
Rather than using document.body.offsetHeight use this:
if ((window.innerHeight + window.scrollY) >= document.body.scrollHeight) {
// you're at the bottom of the page
}