ember-zbj-infinite-scroller

Simple infinite scroller component for Ember apps


Keywords
ember-addon, infinite, scroll
License
MIT
Install
npm install ember-zbj-infinite-scroller@0.0.2

Documentation

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:

.my-element {
  max-height: 300px;
  overflow: 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