Check if user has scrolled to the bottom in Angular 2

Question

What is the best practice to check if user has scrolled to the bottom of the page in Angular2 without jQuery? Do I have access to the window in my app component? If not should i check for scrolling to the bottom of the footer component, and how would I do that? A directive on the footer component? Has anyone accomplished this?

Unwilled

This one is worked in Angular 6 --> https://mcmap.net/q/56333/-how-to-detect-scroll-to-bottom-of-html-element – Pyxis

Answer 1

// 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
    }
}

Unshaped

Had to write it as @HostListener("window:scroll", []) to make it work. – Atonsah

"document.body.offsetHeight - 1" could be better. – Ozonolysis

For me this works - (window.innerHeight + window.scrollY) >= document.body.scrollHeight – Applewhite

this works but like some pixels above the bottom. How can we detect if the user has scrolled to exactly the end? – Sundaysundberg

Answer 2

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>

Agnella

Answer 3

Rather than using document.body.offsetHeight use this:

if ((window.innerHeight + window.scrollY) >= document.body.scrollHeight) { // you're at the bottom of the page }

Applewhite

how is scrollHeight value any different than offsetHeight? – Sundaysundberg

Answer 4

Use the @HostListener decorator to listen for the window:scroll event.

@HostListener('window:scroll', [])
onScroll(): void {
  const triggerAt: number = 128; 
  /* perform an event when the user has scrolled over the point of 128px from the bottom */
  if (document.body.scrollHeight - (window.innerHeight + window.scrollY) <= triggerAt) {
    doSomething();
  }
}

Use scrollHeight instead of offsetHeight or clientHeight if the content to hook the event to scrollable.

Folger