Skip to main content
Create new
Introduction
Reactivity
Props
Logic
Events
Bindings
Lifecycle
Stores
Motion
Transitions
Animations
Easing
SVG
Actions
Classes
Component composition
Context API
Special elements
Module context
Debugging
7GUIs
Miscellaneous
App.svelte
VirtualList.svelte
<script>
import { onMount, onDestroy } from 'svelte';
import VirtualList from './VirtualList.svelte';

let simulateFeed = true;
let books = [];

// Insert dummy data.
// You can also use a store or whatever you need.
// This easily works with 1 million items but Svelte REPL thinks it's an endless loop.
for (let i = 0; i < 10_000; i++) {
books.push({
id: i,
title: String(Math.random()),
});
}

let container;
let scrollTop = 0;
let containerHeight = 0;

// Fixed item height in pixels.
// This could come directly from a store (e.g. if users can configure the height in the UI).
// Or be derived from a store that holds the base font size (e.g. user can configure the font size in your app).
// Or calculated using DOM. Whatever your requirements are.
let itemHeight = 30;

let frame;
let timer;

function poll() {
if (container.scrollTop !== scrollTop) {
scrollTop = container.scrollTop;
}

frame = requestAnimationFrame(poll);
loading Svelte compiler...
/* Select a component to see its compiled code */
result = svelte.compile(source, {
generate: ,
});
/* Select a component to see its compiled code */