ngInfiniteScroll - loadMore() method gets called on every mouse-scroll

Question

Solution below on the comments.

Problem: My loadMore() method gets executed on every container\'s scroll.

Meaning: loa

Answer 1

This might seem obvious, but it evaded me for a day.

I followed the example shown in the image on the homepage of NIS:

The important part to notice is the scroll distance:

infinite-scroll-distance="3"

According to the documentation,

if the browser window is 1000 pixels tall and infinite-scroll-distance is set to 2, the infinite scroll expression will be evaluated when the bottom of the element is within 2000 pixels of the bottom of the browser window. Defaults to 0 (e.g. the expression will be evaluated when the bottom of the element crosses the bottom of the browser window).

During my development, I only had ~50 items displaying, and thought, albeit incorrectly, that NIS was firing infinitely. In fact, it was just trying to fill up ~4000 pixels.

TL;DR: Remove (or at least reduce) infinite-scroll-distance if you have it set.