Scroll down function is getting called multiple times on scrolling down

[khanna-912]

Scroll down function gets called multiple time on scrolling down. It should be called just once on scrolling down each time.

[miro-orpheus]

I have same problem. If I scroll down scrolled is triggered multiple times (scroll is not to bottom of the page). My code is this. `<div class="timeline" infiniteScroll [infiniteScrollDistance]="1" [infiniteScrollThrottle]="300" (scrolled)="getTimelineData()"

<app-timeline-day-box *ngFor="let event of timeline;" [event ]="event ">

[FilipeQ]

this happens on scroll down and up

[miro-orpheus]

@FilipeQ on scroll down.

[miro-orpheus]

I fixed this problem with adding "infiniteScrollDisabled". Now my code is: <div class="timeline" infiniteScroll [infiniteScrollDistance]="1" [infiniteScrollThrottle]="1500" [infiniteScrollDisabled]="blockInfiniteScroll" (scrolled)="getTimelineData()" > <app-timeline-day-box *ngFor="let event of timeline;" [event ]="event "></app-timeline-day-box> </div>

[byrenx]

I've encountered also with the same issue, it continue to call scroll function even if I just scroll down once. This happens when I insert DFP ad banner from google as an item in my list view. But, when I remove the ads in the template it works fine. I don't know if it has something to do with the iframe that google ads added to the template?

[ebakke]

Here's what I'm seeing.

Any short/slow scrolling towards the end of the window will trigger multiple scrolled events. Even if the user doesn't start/stop scrolling (by lifting the finger from a trackpad, for example) but just continues scrolling at a slow rate. scrolled will be fired once every infiniteScrollThrottle milliseconds until the first call to get more results has completed and the new items have been rendered on the page.

This can also happen if a user keeps hitting/bouncing against the bottom of the window while a page of results are fetched.

After a cursory glance, it seems that the event should only be triggered once per IPositionStats.totalToScroll. If that hasn't changed, the event should not be triggered again. That may not handle all cases.

[orizens]

@ebakke you're right. an enhancement of triggering once until totalToScroll has change is the way.

[orizens]

fixed by 269b5f6dd84125698620ffce8f0f8b4b1a1bafe5

[kamal0912]

fixed by 269b5f6

Hi @orizens , Can you please specify what exactly do I need to write in my code to fix this issue? You have marked this issue as closed, but I am unable to see any solution for it. If I scroll fast, scroll event fires multiple times and this is causing huge problem for me as every scroll down call makes a request to server. Event should get called once the user is done with scrolling. Please help.

[ghost]

I am facing the same issue. It can not seem to be working. Can you give a hint what can be done to get it running propertly (1load per scroll)?

[aakash-p-27]

Hey, I am also facing the same issue. Can you please suggest to me what can be done to running properly?

[TGihan]

i am also having the same issue. Its duplicating items in my list and send multiple requests to the server. How to prevent multiple scroll event trigger?

[angularui06]

I got the same issue and fixed using infiniteScrollDisabled Property (Angular 6)

Html

<div
      [ngClass]="{'search-results': transactionRows?.length > 0}"
      infiniteScroll
      [infiniteScrollDistance]="2"
      [infiniteScrollThrottle]="50"
      [scrollWindow]="false"
      **[infiniteScrollDisabled]="busyGettingData"**
      (scrolled)="onScroll()"
    ></div>

TS

busyGettingData = false;

  onScroll() {
    if (this.busyGettingData) {
      return
    }
    this.busyGettingData = true
  this.getAPIData();
  }

getAPIData() {
   // API Success Block
    this.busyGettingData = false

 // API Error Block
this.busyGettingData = false
}

[sunny7899]

@angularui06 Thanks working fine in my case.

[Rakshithkakathkar]

Wow, this is so cool Thank you @angularui06! 😃

[lzatloukal]

@angularui06 It`s working. Thank you for the solution.