{"id":20746860,"url":"https://github.com/zestia/ember-simple-infinite-scroller","last_synced_at":"2025-04-06T04:09:47.202Z","repository":{"id":9423178,"uuid":"62070031","full_name":"zestia/ember-simple-infinite-scroller","owner":"zestia","description":":scroll: Simple infinite scroll component for Ember apps","archived":false,"fork":false,"pushed_at":"2024-11-12T10:11:07.000Z","size":6639,"stargazers_count":39,"open_issues_count":8,"forks_count":7,"subscribers_count":17,"default_branch":"main","last_synced_at":"2025-03-30T03:03:55.858Z","etag":null,"topics":["ember","infinite-scroll"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/zestia.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2016-06-27T16:13:16.000Z","updated_at":"2024-11-12T10:11:13.000Z","dependencies_parsed_at":"2023-02-18T13:45:57.557Z","dependency_job_id":"ddf5f62b-dae7-457f-8c52-96dfc9492c6f","html_url":"https://github.com/zestia/ember-simple-infinite-scroller","commit_stats":null,"previous_names":["amk221/ember-simple-infinite-scroller"],"tags_count":76,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zestia%2Fember-simple-infinite-scroller","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zestia%2Fember-simple-infinite-scroller/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zestia%2Fember-simple-infinite-scroller/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zestia%2Fember-simple-infinite-scroller/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/zestia","download_url":"https://codeload.github.com/zestia/ember-simple-infinite-scroller/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247430869,"owners_count":20937874,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["ember","infinite-scroll"],"created_at":"2024-11-17T08:09:35.163Z","updated_at":"2025-04-06T04:09:47.142Z","avatar_url":"https://github.com/zestia.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# @zestia/ember-simple-infinite-scroller\n\n[![Ember Observer][ember-observer-badge]][ember-observer-url]\n\n\u003c!-- [![GitHub Actions][github-actions-badge]][github-actions-url] --\u003e\n\n[npm-badge]: https://img.shields.io/npm/v/@zestia/ember-simple-infinite-scroller.svg\n[npm-badge-url]: https://www.npmjs.com/package/@zestia/ember-simple-infinite-scroller\n[github-actions-badge]: https://github.com/zestia/ember-simple-infinite-scroller/workflows/CI/badge.svg\n[github-actions-url]: https://github.com/zestia/ember-simple-infinite-scroller/actions\n[ember-observer-badge]: https://emberobserver.com/badges/-zestia-ember-simple-infinite-scroller.svg\n[ember-observer-url]: https://emberobserver.com/addons/@zestia/ember-simple-infinite-scroller\n\nThis Ember addon provides a simple component that fires an action whenever it is scrolled to the bottom.\nAllowing you to load more data.\n\n## Installation\n\n```\nember install @zestia/ember-simple-infinite-scroller\n```\n\nAdd the following to `~/.npmrc` to pull @zestia scoped packages from Github instead of NPM.\n\n```\n@zestia:registry=https://npm.pkg.github.com\n//npm.pkg.github.com/:_authToken=\u003cYOUR_GH_TOKEN\u003e\n```\n\n## Demo\n\nhttps://zestia.github.io/ember-simple-infinite-scroller\n\n## Example\n\n```handlebars\n\u003cInfiniteScroller\n  @onLoadMore={{this.loadMore}}\n  @percentDown={{100}}\n  as |scroller|\n\u003e\n  {{#each things as |thing|}}\n    ...\n  {{/each}}\n  {{if scroller.isLoading 'Please wait...'}}\n\u003c/InfiniteScroller\u003e\n```\n\n## Features\n\n- Very simple! ✔︎\n- Bidirectional ✔︎\n- Not coupled to Ember Data ✔︎\n- Supports use with FastBoot ✔︎\n\n## Notes\n\n- This addon intentionally does not come with any styles.\n\n## `InfiniteScroller`\n\n### Arguments\n\n#### `@onLoadMore`\n\nRequired. Fired when the the element has been scrolled to the specified `@percent`.\n\n#### `@element`\n\nOptional. By default the scroll position of the component's own DOM element is monitored. You can use this argument to change the element, to monitor the document for example.\n\n#### `@percentDown`\n\nOptional. The distance that has to be scrolled down before the load more action is fired. 100% means the bottom.\n\n#### `@percentUp`\n\nOptional. The distance that has to be scrolled up before the load more action is fired. 0% means the top.\n\n#### `@debounce`\n\nOptional. Milliseconds delay for when to check if more needs to be loaded. Defaults to every `100`ms\n\n### API\n\n#### `isLoading`\n\nWhether the promise for more data has resolved yet\n\n#### `direction`\n\nThe direction scrolled that caused `onLoadMore` to fire\n\n#### `isScrollable`\n\nWhether the element is overflowing or not. If it's not, then the user will not be able to scroll to load more. In such a case, you can use this boolean to provide a button to manually load more.\n\n#### `loadMore`\n\nCall this to manually load more\n\n## Testing\n\nA test helper is provided to help scrolling your element\n\n\u003cdetails\u003e\n  \u003csummary\u003eExample\u003c/summary\u003e\n\n```javascript\nimport { scrollToPercentage } from '@zestia/ember-simple-infinite-scroller/test-support/helpers';\n\ntest('loading more', async function () {\n  await visit('/');\n  await scrollToPercentage('.infinite-scroller', 100);\n  // ...\n});\n```\n\n\u003c/details\u003e\n\n## Performance\n\nPlease read: https://github.com/TryGhost/Ghost/issues/7934\n\nYou may need to add the below code to `app/app.js`\n\n\u003cdetails\u003e\n  \u003csummary\u003eView\u003c/summary\u003e\n\n```javascript\ncustomEvents = {\n  touchstart: null,\n  touchmove: null,\n  touchend: null,\n  touchcancel: null\n};\n```\n\n\u003c/details\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzestia%2Fember-simple-infinite-scroller","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fzestia%2Fember-simple-infinite-scroller","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzestia%2Fember-simple-infinite-scroller/lists"}