sveltekit_scroll_infinite

Sveltekit_scroll_infinite

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.

Top categories

Loading Svelte Themes