infiniteScrollAction

An action to quickly implement infinite scroll behavior into your infinit list.

Demo

Play with these options and try hitting the bottom of the container to load new messages!

200ms
0px
Message: #1
Message: #2
Message: #3
Message: #4
Message: #5
Message: #6
Message: #7
Message: #8
Message: #9
Message: #10

Usage

<script lang="ts">
import { infiniteScrollAction } from "svelte-legos";

let isLoading = false;

function loadItems() {
	if (isLoading) return;
	isLoading = true;

  // load your data here
}
</script>

<div
  use:infiniteScrollAction={{
    delay // number, default 200
    distance // number, default: 0
    immediate // boolean, default: true
    disabled // boolean, default: false
    cb: loadItems,
  }}
>
  {#each items as item}
    // render item
  {/each}

  {#if isLoading}
    // show loader here
  {/if}
</div>