@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

Yielded API

The component will yield a hash that provides:

Testing

A test helper is provided to help scrolling your element. Example:

import { scrollToPercentage } from '@zestia/ember-simple-infinite-scroller/test-support/helpers';

test('loading more', async function () {
  await visit('/');
  await scrollToPercentage('.infinite-scroller', 100);
  // ...
});

Performance

Please read: TryGhost/Ghost#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>