Proper opinionated implementation of a virtual scrolling list for equal-height items in Svelte.
Demo (copied and pasted App.svelte and VirtualList.svelte): https://svelte.dev/repl/cbf7977674654d048c4a0fa8fcc1024b?version=3.38.3
This is not a general purpose virtual list that you npm install but rather a starting point for your own project. I believe every project has different requirements and there is no point in creating a virtual list component that tries to cater for every single use case. It leads to bloated code and bugs.
It was extracted from a code base of mine (insert project link once it has a website) and powers an interactive grid that easily renders a million rows in an instant.
vokoscreen-2021-07-21_09-49-58.mp4
(this video was recorded with a dev build and with open dev tools, so it could even be smoother)
By proper I mean:
- it uses
requestAnimationFrameinstead ofscrollevent - it uses native scrolling, the actual moving / scrolling of items is done by the browser
- it intelligently re-uses items by not using keyed each
- it is fully reactive and 99% declarative, I despise imperative code
Have fun.
I'll leave adding a buffer functionality (rendering items above and below the fold) to the reader. I didn't need it (Electron only).