demo: virtual scroll with zero DOM measurement#31
Open
barry166 wants to merge 1 commit intochenglou:mainfrom
Open
demo: virtual scroll with zero DOM measurement#31barry166 wants to merge 1 commit intochenglou:mainfrom
barry166 wants to merge 1 commit intochenglou:mainfrom
Conversation
A variable-height virtual scrolling list where every row height is predicted by Pretext's prepare() + layout() — no DOM measurements at all during scroll. Demonstrates the core README use case: "proper virtualization/occlusion without guesstimates & caching". - 38k items, only ~20 DOM nodes rendered at any time - Binary search for first visible row - Row pooling / recycling for smooth scrolling - Stats bar showing items, rendered count, DOM reads, total height - Reuses the existing shower-thoughts.json corpus from the masonry demo
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
A variable-height virtual scrolling demo that showcases the core README use case — "proper virtualization/occlusion without guesstimates & caching".
Every row height is predicted by
prepare()+layout()with zero DOM measurements during scroll. 38k items rendered with only ~20 DOM nodes at any time.How it works
prepare()all texts upfront (one-time)layout()every item to get pixel heights (pure arithmetic, no DOM)rowTops[]arrayStats bar
The fixed header shows live stats: total items, currently rendered DOM nodes, DOM measurement count (0), and total scroll height predicted by Pretext.
Verified
getBoundingClientRect,offsetHeight,offsetWidthduring 20 scroll jumps across 200,000px — 0 callsclientWidth/offsetTopreads (container geometry, not text measurement): 1 per render frame, as expectedbun test— 61/61 passtsc --noEmit— 0 errorsChanges
pages/demos/virtual-scroll.html— markup + stylespages/demos/virtual-scroll.ts— virtual scroll logic with Pretext height predictionpages/demos/index.html— add Virtual Scroll card to demo index