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.

ember install @zestia/ember-simple-infinite-scroller

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

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

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

The component will yield a hash that provides:

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);
  // ...
});

Please read: TryGhost/Ghost#7934

You may need to add this to app/app.js

customEvents = {
  touchstart: null,
  touchmove: null,
  touchend: null,
  touchcancel: null
};

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>