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.

Local demo:

git clone https://github.com/0x088730/sveltekit_scroll_infinite.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 | Authorsveltekit_scroll_infinite

Component props:

Events

NPM statistics

Download stats for this NPM package.

License

Svelte Infinite Scroll is open source software licensed as MIT.