Svelte Infinite Scroll

• • • • • •

Infinite Scroll Component to Svelte

Installation

npm i svelte-infinite-scroll
// OR
yarn add svelte-infinite-scroll

Note: to use this library in sapper, install as devDependency. See the link.

Demo Link

Local demo:

git clone https://github.com/andrelmlins/svelte-infinite-scroll.git
cd svelte-infinite-scroll
npm install && npm run dev

Examples

An example of how to use the library

<script>
  import SvelteInfiniteScroll from "svelte-infinite-scroll";
  import allCountries from "./countries.js";

  let page = 0;
  let size = 20;
  let countries = [];

  $: countries = [
    ...countries,
    ...allCountries.splice(size * page, size * (page + 1) - 1)
  ];
</script>

<style>
  ul {
    width: 400px;
    max-height: 400px;
    overflow-x: scroll;
  }
</style>

<ul>
  {#each countries as country}
    <li>{country.name}</li>
  {/each}
  <SvelteInfiniteScroll threshold={100} on:loadMore={() => page++} />
</ul>

Another Examples

Infinite scroll with requests | Link | Author
Infinite scroll reverse | Link | Author

Properties

Component props:

Prop	Type	Default	Description
`threshold`	number	0	Threshold to call loadMore
`elementScroll`	node	-	Element to bind scroll
`window`	bool	false	Bind scroll in window
`hasMore`	bool	true	Tells you if there are more items to load
`horizontal`	bool	false	Changing orientation
`reverse`	bool	false	Revese scroll direction

Events

Event	Description
`loadMore`	Tells you if there are more items to load

NPM Statistics

Download stats for this NPM package

License

Svelte Infinite Scroll is open source software licensed as MIT.

algusarov/svelte-infinite-scroll