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?

This one is worked in Angular 6 --> https://stackoverflow.com/a/42547136/621951 — Günay Gültekin, Oct 11 '18 at 17:14

score 29 · Accepted Answer · edited Sep 24 '17 at 06:47

29

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

edited Sep 24 '17 at 06:47

pabloruiz55

1,306
1
14
27

answered Jul 07 '16 at 17:47

mayur

3,558
23
37

1

Had to write it as @HostListener("window:scroll", []) to make it work. – pabloruiz55 Sep 23 '17 at 21:50
"document.body.offsetHeight - 1" could be better. – musigh Mar 05 '19 at 14:31
2

For me this works - (window.innerHeight + window.scrollY) >= document.body.scrollHeight – Aditya Apr 16 '19 at 10:18
this works but like some pixels above the bottom. How can we detect if the user has scrolled to exactly the end? – Aakash Thakur May 16 '19 at 16:44

score 13 · Answer 2 · answered Jul 08 '17 at 00:52

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>

score 3 · Answer 3 · answered Apr 16 '19 at 10:21

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 }

answered Apr 16 '19 at 10:21

Aditya

395
2
6

how is scrollHeight value any different than offsetHeight? – Aakash Thakur May 16 '19 at 16:42

score 0 · Answer 4 · answered Aug 09 '20 at 03:26

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.

Check if user has scrolled to the bottom in Angular 2

4 Answers4

Linked