ngx-infinite-scroll scrolled event won't stop firing

Question

I implemented infinite scroll with ngx-infinite-scroll. When the user reaches the bottom of the scrollable element (with a fixed height), the event 'scrolled' will trigger and call an API to load more items into this element.

The problem is, when I display more data, the scroll level is automatically changed and the event will trigger again. I just want this event to be manually triggered by the user. Is there a way to block to scroll level when I load more data?

   <div
        class="project-feed-container"
        infiniteScroll
        [infiniteScrollDistance]="2"
        [infiniteScrollThrottle]="50"
        [alwaysCallback]="true"
        [scrollWindow]="false"
        (scrolled)="onScroll()"
    >

       <!-- *ngFor with content -->

    </div>

Answer 1

Here's a possible solution to the API response triggering new requests. It is based on a couple of flags that check wether the application can perform new requests.

canLoad. It controls wether the application can load new items from API.

pendingLoad. Keeps a queued action that will get triggered on the next polling iteration.

// NgOnInit to set a time interval to check status. Adjust timing to your need. 
ngOnInit() {
  setInterval( () => {
    this.canLoad = true;
    if ( this.pendingLoad ) {
      this.onScrollDown();
    }
  }, 2000);
}

Then, when the scroll functions gets triggered the app should check if it's allowed to call the API and add new elements.

onScrollDown() {
    if ( this.canLoad ) {
      this.canLoad = false;
      this.pendingLoad = false;

      // Call API here
      this.appendItems(0, apiData);
    } else {
      this.pendingLoad = true;
    }
  }

Here's a StackBlitz link with a demo.

Answer 2

You can use the optional input [infiniteScrollDisabled] in your tag and set the boolean value through your typescript.

 <div
        class="project-feed-container"
        infiniteScroll
        [infiniteScrollDistance]="2"
        [infiniteScrollThrottle]="50"
        [infiniteScrollDisabled]="scrollCheck"
        [alwaysCallback]="true"
        [scrollWindow]="false"
        (scrolled)="onScroll()"
    >
    </div>

Check appropriate condition required in your ts file, and set the boolean to true

scrollCheck: boolean = false;

onScrollDown() {
    if(condition){
       this.scrollCheck=true;
    }
    //other code
}

Answer 3

In my case, it helped to set the infinite scroll Distance to 0 because then it only made the new request when the scroll was at the end my code was like this:

<div infiniteScroll (scrolledUp)="onScrollUp()" (scrolled)="onScrollDown()" [scrollWindow]="false" [infiniteScrollDistance]="0">