ember-simple-infinite-scroller

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

Attribute	Description	Default
on-load-more	Action to perform when the bottom is scrolled to
use-document	Goes off document scroll rather than the element's scroll position	false
trigger-at	A percentage of the scrollable height to consider as the 'bottom'	"100%"
scroll-debounce	Milliseconds delay used to check if the bottom has been scrolled to	100 ms

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:

Property	Description
isLoading	True when the promise for more data has not resolved yet
error	The caught error from the last attempt to load more
loadMore	Action for manually loading more

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
}

Changelog

1.0.12

• Upgrade devDependencies