\n\n# svelte-virtual-infinite-list([DEMO](https://svelte.dev/repl/b19db3b0de424d72a451e95b5655a57e?version=3.46.2))\n\n[](https://github.com/koheing/svelte-virtual-infinite-list/actions/workflows/ci.yaml)\n\nA virtual list component for Svelte apps. Instead of rendering all your data, `` just renders the bits that are visible, keeping your page nice and light. \n\nThis library is forked and extends from [@sveltejs/svelte-virtual-list](https://github.com/sveltejs/svelte-virtual-list), and all the basic feature of [@sveltejs/svelte-virtual-list](https://github.com/sveltejs/svelte-virtual-list) are available except default slot. \n\n\n## Installation\n\n```bash\nnpm i svelte-virtual-infinite-list\n```\n\n\n## Usage\n\n```html\n\n\n\n \n
\n
{item.number}: {item.name}
\n
\n\n \n
\n Loading...\n
\n\n \n
\n Empty\n
\n\n```\n\n## Additional Props\n\n| No | Property Name | Type | Note | \n| :--: | :-- | :-- | :-- |\n| 1 | `loading` | boolean | - |\n| 2 | `direction` | `'top'` or `'bottom'` or `'vertical'` | Loading direction. |\n| 3 | `maxItemCountPerLoad` | number | **Deprecated. This valiable removed @2.0.0. Use `persists`, please.** |\n| 4 | `persists` | number | [**For direction-top infinite scroll user**] Maximum number of items loaded per load. The offset after loaded may be significantly shift if the number of items that exceeds this value is loaded. `Default value is 30.` |\n| 5 | `uniqueKey` | string | You need to set specify one unique property like `id` in the item object if you want to use the `scrollToIndex` method. `Default value is undefined.` | \n\n## Additional Events\n\n| No | Property Name | Type | Note | \n| :--: | :-- | :-- | :-- |\n| 1 | `on:initialize` | () => any | Emit on change items count from 0 to more over. |\n| 2 | `on:infinite` | (event: InfiniteEvent) => any | Emit on scrollbar reached top or bottom. |\n\n## Additional Slots\n| No | Slot Name | Note | \n| :--: | :-- | :-- |\n| 1 | `item` | Displayed item |\n| 2 | `loader` | Displayed element if loading is `true` |\n| 3 | `empty` | Displayed element if items is `[]` and loading is `false` |\n\n## Additional Methods\n\n| No | Method Name | Type | Note | \n| :--: | :-- | :-- | :-- |\n| 1 | `scrollTo` | `(offset: number) => Promise` | This allows you to scroll to a specific offset. |\n| 2 | `scrollToIndex` | `(index: number, options?: { align: 'top' \\| 'bottom' \\| 'center' }) => Promise` | This allows you to scroll to a specific item using the index. Returns `true` if this is done. |\n| 3 | `scrollToTop` | `() => Promise` | This allows you to scroll to top. |\n| 4 | `scrollToBottom` | `() => Promise` | This allows you to scroll to bottom. |\n| 5 | `reset` | `() => Promise` | This allows you to reset VirtualInfiniteList. |\n| 6 | `forceRefresh` | `() => Promise` | This allows you to tick and render VirtualInfiniteList. |\n\n## LICENSE\n\n[LIL (original)](https://github.com/sveltejs/svelte-virtual-list/blob/master/LICENSE)\n\n[LIL+MIT](https://github.com/koheing/svelte-virtual-infinite-list/blob/main/LICENSE)\n","readmeFilename":"README.md","license":"LIL+MIT"}
![](\"https://user-images.githubusercontent.com/55611095/113577028-91f6e800-965b-11eb-8081-4fb0f65fa07b.png\" "\\"svelte-virtual-infinite-list\\"")