angular - How to detect scroll to bottom of html element

Question

I have this element that I'm referencing by Id:

    let infiniteScrollElement = document.getElementById('th-infinite-scroll-tracker');

I need to listen when the browser is has reached the bottom of the element.

How to achieve this?

Answer 1

You could check whether the user has scrolled to the bottom or not in the below way...

Html file

<div (scroll)="onScroll($event)">
    ...
    ...
</div>

typescript file

import { Component, HostListener } from '@angular/core';
    ...
    ...
@HostListener('scroll', ['$event'])
onScroll(event: any) {
    // visible height + pixel scrolled >= total height 
    if (event.target.offsetHeight + event.target.scrollTop >= event.target.scrollHeight) {
      console.log("End");
    }
}