# ember-simple-infinite-scroller

> Simple infinite scroller component for Ember apps

Latest version **1.0.12** (published 2017-12-02) · MIT license · 0 weekly downloads

> **Deprecated.** This package is deprecated.

## Install

```sh
npm install ember-simple-infinite-scroller
pnpm add ember-simple-infinite-scroller
yarn add ember-simple-infinite-scroller
bun add ember-simple-infinite-scroller
```

## Health

**Score 10/100 (F)** — status: deprecated.

Negative: deprecated.

## Facts

| | |
|---|---|
| Version | 1.0.12 |
| Published | 2017-12-02 |
| First published | 2016-06-28 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Node | >= 4 |
| Dependencies | 2 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | Andrew Kirwin |
| Maintainers | amk221 |
| Keywords | ember-addon, infinite, scroll |

## Links

- npm: https://www.npmjs.com/package/ember-simple-infinite-scroller
- Repository: https://github.com/amk221/ember-simple-infinite-scroller
- Issues: https://github.com/amk221/ember-simple-infinite-scroller/issues
- npm.io page: https://npm.io/package/ember-simple-infinite-scroller

## Dependencies (2)

- [ember-cli-babel](https://npm.io/package/ember-cli-babel.md) 6.10.0
- [ember-cli-htmlbars](https://npm.io/package/ember-cli-htmlbars.md) 2.0.3

## Recent versions

- 1.0.12 (latest) — 2017-12-02
- 1.0.10 — 2017-07-12
- 1.0.9 — 2017-05-22
- 1.0.8 — 2017-05-18
- 1.0.7 — 2017-05-15
- 1.0.6 — 2017-05-03
- 1.0.5 — 2017-05-02
- 1.0.4 — 2017-04-03
- 1.0.3 — 2017-01-24
- 1.0.2 — 2016-12-01
- 1.0.1 — 2016-11-29
- 1.0.0 — 2016-08-31
- 0.0.4 — 2016-07-28
- 0.0.3 — 2016-06-29
- 0.0.2 — 2016-06-28
- … 1 more at https://npm.io/package/ember-simple-infinite-scroller/versions

## README

# ember-simple-infinite-scroller

<a href="http://emberobserver.com/addons/ember-simple-infinite-scroller"><img src="http://emberobserver.com/badges/ember-simple-infinite-scroller.svg"></a> &nbsp; <a href="https://david-dm.org/amk221/ember-simple-infinite-scroller#badge-embed"><img src="https://david-dm.org/amk221/ember-simple-infinite-scroller.svg"></a> &nbsp; <a href="https://david-dm.org/amk221/ember-simple-infinite-scroller#dev-badge-embed"><img src="https://david-dm.org/amk221/ember-simple-infinite-scroller/dev-status.svg"></a> &nbsp; <a href="https://codeclimate.com/github/amk221/ember-simple-infinite-scroller"><img src="https://codeclimate.com/github/amk221/ember-simple-infinite-scroller/badges/gpa.svg" /></a> &nbsp; <a href="http://travis-ci.org/amk221/ember-simple-infinite-scroller"><img src="https://travis-ci.org/amk221/ember-simple-infinite-scroller.svg?branch=master"></a>

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

```handlebars
{{#infinite-scroller on-load-more=(action 'loadMore') as |scroller|}}
  {{#each things as |thing|}}
    ...
  {{/each}}
  {{if scroller.isLoading 'Please wait...'}}
{{/infinite-scroller}}
```

<a href="https://amk221.github.io/ember-simple-infinite-scroller">Demo</a>

## Configuration

<table>
  <tr>
    <th>Attribute</th>
    <th>Description</th>
    <th>Default</th>
  </tr>
  <tr>
    <td>on-load-more</td>
    <td>Action to perform when the bottom is scrolled to</td>
    <td></td>
  </tr>
  <tr>
    <td>use-document</td>
    <td>Goes off document scroll rather than the element's scroll position</td>
    <td><code>false</code></td>
  </tr>
  <tr>
    <td>trigger-at</td>
    <td>A percentage of the scrollable height to consider as the 'bottom'</td>
    <td><code>"100%"</code></td>
  </tr>
  <tr>
    <td>scroll-debounce</td>
    <td>Milliseconds delay used to check if the bottom has been scrolled to</td>
    <td><code>100</code> ms</td>
  </tr>
</table>


##### Element vs Document scroll

Either make your component scrollable:

```css
.my-element {
  max-height: 300px;
  overflow-y: auto;
}
```

**OR**

Set `use-document=true` if your component is not scrollable.

```handlebars
{{#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:

<table>
  <tr>
    <th>Property</th>
    <th>Description</th>
  </tr>
  <tr>
    <td>isLoading</td>
    <td>True when the promise for more data has not resolved yet</td>
  </tr>
  <tr>
    <td>error</td>
    <td>The caught error from the last attempt to load more</td>
  </tr>
  <tr>
    <td>loadMore</td>
    <td>Action for manually loading more</td>
  </tr>
</table>

### Performance

Please read: https://github.com/TryGhost/Ghost/issues/7934

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

```javascript
customEvents: {
  touchstart: null,
  touchmove: null,
  touchend: null,
  touchcancel: null
}
```

---
_Source: https://npm.io/package/ember-simple-infinite-scroller · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._