Infinite scroll keeps firing in inactive tab


#1

If I have an infinite scoll list in an active tab that’s currently loading more elements, and I switch to another unrelated tab, the first infinite scroll will keep loading elements. It’s especially problematic since it always thinks the is on-screen, so it never stops.

This is reproduced here: http://codepen.io/mikemintz/pen/azmrGd?editors=101

Watch the console.log statements. If you stay on the initial tab, it stops loading more when it gets to the bottom. If you switch to the second tab after it loads a couple, it keeps loading (slightly bad) and doesn’t stop even when it’s beyond the bottom of the page (quite bad).


#2

This will solve your issue

        $scope.$apply(function(){
            $scope.$broadcast('scroll.infiniteScrollComplete');            
        }); 

I don’t remember where I read it (just in ionic forum). I will send you the link if I found it.


#3

Found it: [Resolved] Issue Beta.14: ion-infinite-scroll keep on calling the method of on-infinite


#4

Thanks for the idea @silverhair2010, but adding $scope.$apply around the broadcast does not resolve the problem.

I think in general the issue is that inactive tabs are still running controller code in the background, unlike cached inactive views.


#5

If you’re still facing this issue or if anyone is looking into this, the problem is that if you leave the tab prematurely your stuff hasn’t filled the whole screen yet. Thus it will keep doing this.

Tell it there’s no more data to be loaded before you leave the tab.