CODEWITHSUNDEEP
angularangular2-templateangular2-directives
C. Kearns
C. Kearns

Reputation: 1671

Check if user has scrolled to the bottom in Angular 2

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?

Upvotes: 19

Views: 29632

Answers (4)

Ye Min Aung
Ye Min Aung

Reputation: 1

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.

Upvotes: 0

Aditya
Aditya

Reputation: 415

Rather than using document.body.offsetHeight use this:

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

Upvotes: 3

mayur
mayur

Reputation: 3618

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

Upvotes: 29

Rusty Rob
Rusty Rob

Reputation: 17173

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>

Upvotes: 13

Related Questions