(Scrolled) event triggered on multiple angular routes

[patilsagar28290]

In my site, I have two tabs like 'Active Users" and "Left users" (two separate routes). Infinite scroll is working fine when we are on first tab, but when we switched to another tab or route. First tabs (previous routes) scrolled events gets triggered.

Expected Behavior

Scrolled event should be triggered for active route. It should not trigger for visited route

Actual Behavior

When we change route previous routes scrolled event handler gets called

Steps To Reproduce / Demo (if applicable)

[gchokeen]

I got same issue! Is there any work around ?

[patilsagar28290]

@gchokeen Below workaround helped me, you can try as well

On route changed, maintain one flag to disable scroll effect.
this._router.events
.pipe(filter((event) => event instanceof RoutesRecognized))
.subscribe((event: RoutesRecognized) => {
this.routeChanged = event.url.replace('/', '') !== 'home';
this._changeDetectionRef.detectChanges();
})

In html file, set infiniteScrollDisabled attribute
<div
infiniteScroll
[infiniteScrollDistance]="infiniteScrollDistance"
[infiniteScrollDisabled]="routeChanged"
(scrolled)="onScrollDown()"
>

  Hopefully this will work for you as well.

[gchokeen]

@patilsagar28290 Excellent thanks it worked perfectly!