@zestia/ember-simple-infinite-scroller

@zestia/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 @zestia/ember-simple-infinite-scroller

Demo

https://zestia.github.io/ember-simple-infinite-scroller/

Example

<InfiniteScroller @onLoadMore={{this.loadMore}} as |scroller|>
  {{#each things as |thing|}}
    ...
  {{/each}}
  {{if scroller.isLoading "Please wait..."}}
</InfiniteScroller>

Notes

• Does not use jQuery ✔︎
• Ember Data Friendly ✔︎
• Supports use with FastBoot ✔︎
• No included styles ✔︎

Configuration

Argument	Description	Default
onLoadMore	Action to perform when the @percent scrolled is reached	null
element	Monitors the scroll position of the given element	null
percent	Distance scroll from the top for when to fire the load more action	100
debounce	Milliseconds delay for when to check if more needs to be loaded	100

Yielded API

The component will yield a hash that provides:

Property	Description
setElement	Sets the element for which to monitor the scroll position of
isLoading	True when the promise for more data has not resolved yet
isScrollable	True when scroll element is overflowing
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
};

Scenario to be aware of

If your scrollable element is displaying 10 things, but they don't cause the element to overflow, then the user won't ever be able to load more - because they won't be able to scroll and therefore the onLoadMore action will never fire.

To account for this, you can display a button for manually loading more...

<InfiniteScroller @onLoadMore={{this.loadMore}} as |scroller|>
  {{#each this.things as |thing|}}
    ...
  {{/each}}

  {{#unless scroller.isScrollable}}
    <button {{on "click" scroller.loadMore}}>Load more</button>
  {{/unless}}
</InfiniteScroller>