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

Answer 1

I am literally working on this now and found that this is the most versatile use case for "me."

As YASH DAVE mentioned, using a Host Listener is your best bet for an Angular 'onScroll' implementation. However, 'Window: Scroll' didn't work for my use case (a table injected within a Dashboard). So I had luck doing this

---

@HostListener('scroll', ['$event.target'])
 onScroll(elem){
  if(( elem.offsetHeight + elem.scrollTop) >=  elem.scrollHeight) {
     console.log("It's Lit");
  }
}'

CSS:

:host {
     display: block;
     max-height: 700px;
     width: 100%;
     overflow-y: scroll;
     scroll-behavior: auto;
 }

---

Explanation:

• Basically the generic "scroll" listens for the scroll event occurring on the host element.
• passes the element reference that triggered the scroll event via $event.target to my onScroll(elem) method
• Then I take the element reference and determine if the offsetHeight and ScrollTop is greater than the scrollHeight (yes this is different then how others have implemented this) reference: mVChr's Implementation
• Then boom, enjoy.
• Note: If you just need a, and I can't stress this enough, simple solution just add a (scroll) event listener on the particular element

Additionally, review This for an insight on offsetHeight, clientHeight, scrollHeight.