Angular 13 fire event on swiping up after certain height

Question

How to fire an event after "scrolling down" on touch device? I have a list of items where each time after scrolling >80% of the list loads 10 additional items. The example below works fine when using mouse & keyboard but when I switch to touch device, it does not get the scrollTop height due to it is not scrolling. How can I accomplish the same behavior on mobile devices?

HTML

<div class="...">
  <angular-component
         id="article-list"
         (scroll)="onScroll('article-list')"
         [list]="list"
         class="...">
  </angular-component>
</div>

TS

@HostListener('touchstart', ['$event'])
onScroll(elementId: string): void {
  const articleList = document.getElementById(elementId);
   if (articleList) {
    const scrollPercent = Math.ceil((((articleList.offsetHeight + articleList.scrollTop) / 
     articleList.scrollHeight) * 100));
     if (scrollPercent < 30) {
       this.enableScrollToTopButton = false;
     } else {
       this.enableScrollToTopButton = true;
     }
      // code for loading items
   }
}

Answer 1

Given your needs, I would take a totally different approach than you.

Here is an example : https://stackblitz.com/edit/angular-ivy-ryetnx?file=src%2Fapp%2Fapp.component.ts

The principle is that the parent component listens to the scroll events on himself, detects when the limit has been reached, then does something (like loading more elements).

This is just the basis, but this gives you a neat approach to handle your needs.

  ngOnInit() {
    // Listen to the scroll of the host
    fromEvent(this.el.nativeElement, 'scroll')
      .pipe(
        // Throttle to trigger only if 50ms have elapsed
        throttleTime(50),
        map((event: any) => {
          const el: HTMLElement = event.target;
          const pageHeight = el.clientHeight;
          const totalHeight = el.scrollHeight;
          const currentScroll = el.scrollTop;

          // Get the bottom point of the page
          const bottomPoint = pageHeight + currentScroll;

          // Get the counts of page (if needed);
          const pageCount = Math.round(totalHeight / pageHeight);

          // Get the current scroll % of the user in the page
          const percentScroll = Math.round((bottomPoint * 100) / totalHeight);

          return { pageCount, percentScroll };
        }),
        // Check if more than 80% has been scrolled
        filter((v) => v.percentScroll >= 80),
        // Take only the first emission
        first()
      )
      .subscribe(() => {
        console.log('Page should load more items');
      });