FAQ

Who made ngInfiniteScroll

ngInfiniteScroll was developed internally by Michelle Tilley for use at Learnist. It currently drives functionality on several pages, including the home page.

How do I get help?

If you'd like to report an issue, please do so at the GitHub issue tracker. StackOverflow is an excellent place to ask for help if you get stuck; creating a working example of your problem using JsFiddle or Plunker is encouraged.

Why is ngInfiniteScroll triggering my expression on every single scroll event?

The infiniteScroll directive uses the height of the element that it's attached to in order to determine how close to the bottom of the window it is. In some cases, the browser can report a height of 0, which causes this behavior. Usually, this is due to a container element that only contains floated children. The simplest way to fix this problem is to add a "spacer" element to the bottom of the container (something like <div style='clear: both;'></div>); see this StackOverflow question and its associated answers for more details.

Why is my performance so poor when using ngInfiniteScroll?

There are a couple of things to check if you're getting poor performance when using the infiniteScroll directive.

Ensure that you're not calling your infinite scroll expression too often. Depending on logic you're performing inside the expression or function that ngInfiniteScroll executes for you, you may need to temporarily disable scroll events from triggering the expression. You can do this using the infinite-scroll-disabled attribute. See the documentation for more information, and see the remote data demo to see this technique in action.

Ensure you're not repeating the infinite scroll directive. Most often, you will use the ngRepeat directive inside the infinite scroll directive to achieve the correct results:

<div infinite-scroll='pagerFunction()'>
  <div ng-repeat='item in items'>{{item}}</div>
</div>

A common mistake is to put the ng-repeat on the infinite scroll element itself:

<!-- this is wrong! -->
<div infinite-scroll='pagerFunction()' ng-repeat='item in items'>
  {{item}}
</div>

This is incorrect and will generally result in your browser being very unhappy.