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.