Svelte-infinite-scroll NPM

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 applications, install as devDependency. Take a look at this 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 InfiniteScroll 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}
  <InfiniteScroll 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