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}}
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:
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