Svelte-dynamic-scroll NPM

Svelte Dynamic Scroll

A simple Dynamic Scroll Component for Svelte.

Installation

$ npm i -D svelte-dynamic-scroll

or

$ yarn add -D svelte-dynamic-scroll

Usage

<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>

Demo

https://redfe.github.io/svelte-dynamic-scroll

Properties

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.

Slots

Name	Description
(default)	Slot for rendering elements.
loading	Slot for rendering loading elements.

Default slot Properties

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.

Developing

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 -- --open

Everything inside src/lib is part of your library, everything inside src/routes can be used as a showcase or preview app.

Building

To build your library:

npm run package

To create a production version of your showcase app:

npm run build

You can preview the production build with npm run preview.

To deploy your app, you may need to install an adapter for your target environment.

Publishing

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: