0

Am working on a Infinite scroll for a div to show my table with data As soon as scroll happens on the div am listening it through HostListener. As mentioned below code it executes and a service is made and data gets added to the table but the scroller doesn't move from its place( i think it will adjust as per data insertion or moves a little bit up as data is inserted in the table) and again scroll is detected by HostListener and it repeats until all data is fetched.

<div class="table-container" (scroll)="scrollHandler($event)">
.
.
.
</div>

  .table-container {
    max-height: 400px;
    overflow: auto;
  }

in My class
  @HostListener('scroll', ['$event'])
  scrollHandler(event: MouseEvent) {
    this.handleScroll(event);
  }

private canScroll(event): boolean {
    if (event.srcElement.offsetHeight + event.srcElement.scrollTop == event.srcElement.scrollHeight) {
      return true;
    }
  }

  private handleScroll(event: MouseEvent): void {
    if (event) {
      this.scrolled.emit(this.canScroll(event))
    }
  }

Can anyone tell what am i doing wrong?

AkRoy
  • 343
  • 4
  • 10
  • Is whatever that is listening to scrolled checking for true or false? – AlmaniaM Oct 16 '19 at 02:39
  • Yes. If can scroll returns true then it means it is at bottom and am making a call to fetch data. But problem is scrollHandler is triggering again and again – AkRoy Oct 16 '19 at 06:29

0 Answers0