0

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>
Florent Arlandis
  • 866
  • 1
  • 10
  • 29
  • How many objects does your API provides on the response? I think that happens because the response doesn't contain enough objects to increase the scroll position above the threshold. Can you share more details on the logic or create an example on Stackblitz? – Miquel Canal Oct 10 '19 at 17:11
  • The API provides 8 more objects to be displayed. They are 2 objects displayed by row. Each object height is approximately 45% of the viewport. So each time you load more objects there is enought to increase the scroll position above the threshold. This actually the root of the problem since the scroll position increases upon receiving the date, thus triggering a new request. I can't provide a stackblitz demo today. Will try to do it this weekend. – Florent Arlandis Oct 11 '19 at 07:55
  • I've been playing around the infinite-scroll and I think I'm able to reproduce your issue here: https://stackblitz.com/edit/ngx-infinite-scroll-xnhwl1. I'll post a possible solution to prevent the loading when new content is added to the array. – Miquel Canal Oct 11 '19 at 09:27
  • I fixed it by setting the css property 'overflow-anchor: none'. Source: https://stackoverflow.com/a/48585403/1816277 – Blank Oct 26 '21 at 10:43

3 Answers3

2

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.

Miquel Canal
  • 992
  • 1
  • 17
  • 25
1

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">
Mateus Henrique
  • 11
  • 1
0

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
}
nashwa
  • 11
  • 1