Need to Call API when the user scrolls to the end of the list to load next batch of data using Angular CDK Virtual scroll

Question

I am using below logic to determine if User is at the end of the List. However in the Below case end === total multiple times which is triggering multiple API calls. In actual end and total should be equal only once when the user is at the end of the List. Can any one point out why such strange behaviour? ScrollChange is triggered in HTML (scrolledIndexChange)="scrollChange($event)"

scrollChange(e: any) {    
const end = this.viewport.getRenderedRange().end;
const total = this.viewport.getDataLength();        
if (end === total) {
  console.log('end reached');
  // Call my API to update my list     
}

}