https://github.com/literalpie/qwik-virtual-scroll
Server paginated, virtual scrolling list with Zero JS executed until you scroll
https://github.com/literalpie/qwik-virtual-scroll
performance qwik virtual-scroll web
Last synced: 7 months ago
JSON representation
Server paginated, virtual scrolling list with Zero JS executed until you scroll
- Host: GitHub
- URL: https://github.com/literalpie/qwik-virtual-scroll
- Owner: literalpie
- Created: 2023-03-04T17:44:58.000Z (almost 3 years ago)
- Default Branch: main
- Last Pushed: 2023-04-03T01:48:23.000Z (almost 3 years ago)
- Last Synced: 2025-04-21T19:56:48.420Z (10 months ago)
- Topics: performance, qwik, virtual-scroll, web
- Language: TypeScript
- Homepage: https://qwik-virtual-scroll.netlify.app
- Size: 793 KB
- Stars: 36
- Watchers: 2
- Forks: 3
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Qwik Virtual Scroll
See the demo [here](https://qwik-virtual-scroll.netlify.app).
This is a POC showing virtual scrolling and server pagination of a list of data.
**Virtual scrolling**: Only the visible items in the list are rendered in the DOM. In this demo, there's about 6 items rendered at a time.
**Server Pagination**: instead of fetching all data from the server at once, only 50 items at a time are fetched. When you scroll to reveal items that haven't been fetched yet, 50 more items will be fetched.
## Blow My Mind 🤯
Through the magic of Qwik, ZERO JavaScript is evaluated until the moment you scroll.
## How it works
The first "page" of data is loaded on the server and used to generate the HTML shown when you navigate to the page. The initial state of the virtual scrolling list is also calculated on the server.
When you do start scrolling, the appropriate JavaScript is loaded in the browser (this happens quickly because it was most likely cached by the service worker in a background thread before you started scrolling)