ember-simple-infinite-scroller

       
This Ember addon provides a simple component that fires an action whenever it is scrolled to the bottom. Allowing you to load more data. It is not coupled to Ember-Data like some other infinite scrolling implementations.

Installation

ember install ember-simple-infinite-scroller

Example usage

{{#infinite-scroller on-load-more=(action 'loadMore') as |scroller|}}
  {{#each things as |thing|}}
    ...
  {{/each}}
  {{if scroller.isLoading 'Please wait...'}}
{{/infinite-scroller}}

Demo

Configuration

<th>Attribute</th>
<th>Description</th>
<th>Default</th>

<td>on-load-more</td>
<td>Action to perform when the bottom is scrolled to</td>
<td></td>

<td>use-document</td>
<td>Goes off document scroll rather than the element's scroll position</td>
<td><code>false</code></td>

<td>trigger-at</td>
<td>A percentage of the scrollable height to consider as the 'bottom'</td>
<td><code>"100%"</code></td>

<td>scroll-debounce</td>
<td>Milliseconds delay used to check if the bottom has been scrolled to</td>
<td><code>100</code> ms</td>

Element vs Document scroll

Either make your component scrollable:

.my-element {
  max-height: 300px;
  overflow-y: auto;
}

OR
Set use-document=true if your component is not scrollable.

{{#infinite-scroller use-document=true}}
  {{! action will fire when the document is scrolled to the bottom }}
{{/infinite-scroller}}

Yielded API

The component will yield a hash that provides:

<th>Property</th>
<th>Description</th>

<td>isLoading</td>
<td>True when the promise for more data has not resolved yet</td>

<td>error</td>
<td>The caught error from the last attempt to load more</td>

<td>loadMore</td>
<td>Action for manually loading more</td>

Performance

Please read: https://github.com/TryGhost/Ghost/issues/7934
You may need to add this to app/app.js

customEvents: {
  touchstart: null,
  touchmove: null,
  touchend: null,
  touchcancel: null
}