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:

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.