A simple Dynamic Scroll Component for Svelte.
$ npm i -D svelte-dynamic-scroll
or
$ yarn add -D svelte-dynamic-scroll
<script>
import { DynamicScroll } from 'svelte-dynamic-scroll';
/**
* @param {number} lastValue
*/
function nextChunk(lastValue) {
const _last = lastValue ?? -1;
let array = [];
for (let i = 0; i < 10; i++) {
array.push(_last + (i + 1));
}
return array;
}
</script>
<div class="app">
<h2>Infinite Scroll</h2>
<div class="container">
<DynamicScroll {nextChunk} let:index let:value>
<div>{value}:({index})</div>
<div slot="loading">loading...</div>
</DynamicScroll>
</div>
</div>
<style>
:global(body) {
margin: 0;
}
.app {
height: 100vh;
}
h2 {
height: 50px;
margin: 0;
padding: 10px;
box-sizing: border-box;
}
.container {
/* It is important to specify height */
height: calc(100% - 50px);
}
</style>https://redfe.github.io/svelte-dynamic-scroll
| Property | Type | Default | Description |
|---|---|---|---|
| previousChunk | (lastValue:T=) => T[] | Promise<T[]> | undefined | Function to be called when the scroll reaches the top of the container. |
| nextChunk | (lastValue:T=) => T[] | Promise<T[]> | undefined | Function to be called when the scroll reaches the bottom of the container. |
| bufferSize | number | -1 | Number of elements to be rendered before and after the visible area. |
| triggerRangeRatio | number | 0.1 | The ratio of the visible area to trigger the previousChunk or nextChunk function. |
| maxRetryCountOnPreLoad | number | 20 | Maximum number of retries when the previousChunk or nextChunk function returns null. |
| onScrollCallback | (event:UIEvent) => void | undefined | Callback function to be invoked when the scroll event occurs. |
| axis | string | 'y' | Scroll axis. 'x' or 'y' |
| list | T[] | [] | the list of elements to be rendered. It should have the same type as the return value of the previousChunk function and the nextChunk function. |
| scrollPosition | number | undefined | Scroll position. |
T is the type of the return value of the previousChunk function and the nextChunk function.
| Name | Description |
|---|---|
| (default) | Slot for rendering elements. |
| loading | Slot for rendering loading elements. |
| Property | Type | Description |
|---|---|---|
| index | number | Index of the element to be rendered. |
| value | T | Value of the element to be rendered. It should have the same type as the return value of the previousChunk function and the nextChunk function. |
T is the type of the return value of the previousChunk function and the nextChunk function.
Once you've created a project and installed dependencies with npm install (or pnpm install or yarn), start a development server:
npm run dev
# or start the server and open the app in a new browser tab
npm run dev -- --openEverything inside src/lib is part of your library, everything inside src/routes can be used as a showcase or preview app.
To build your library:
npm run packageTo create a production version of your showcase app:
npm run buildYou can preview the production build with npm run preview.
To deploy your app, you may need to install an adapter for your target environment.
Go into the package.json and give your package the desired name through the "name" option. Also consider adding a "license" field and point it to a LICENSE file which you can create from a template (one popular option is the MIT license).
To publish your library to npm:
npm publish