🚀 Virtual Scrolling Demo

Render thousands of items smoothly. Only visible items are in the DOM. Scroll the masonry below to see virtualization in action.

Items

Count: 2,000

Virtualization

Enable (compare performance!) Scroll height: 600px Overscan: 5

Layout

minColWidth: 180px gap: 12px Order: row-first (forced)

2,000 Total Items

~14 Rendered

0px Width

ON Virtual

#0 258px

#10 84px

#20 292px

#30 138px

#40 98px

#50 238px

#60 168px

#1 245px

#11 235px

#21 102px

#31 159px

#41 119px

#51 259px

#61 247px

#2 189px

#12 225px

#22 95px

#32 97px

#42 236px

#52 171px

#62 103px

#72 290px

#3 251px

#13 101px

#23 91px

#33 95px

#43 139px

#53 207px

#63 212px

#73 138px

#83 223px

#4 267px

#14 227px

#24 88px

#34 101px

#44 157px

#54 98px

#64 90px

#5 191px

#15 110px

#25 203px

#35 227px

#45 136px

#55 225px

#65 204px

#75 270px

#6 212px

#16 209px

#26 228px

#36 136px

#46 298px

#56 286px

#66 234px

#7 102px

#17 128px

#27 259px

#37 255px

#47 121px

#57 240px

#67 119px

#77 89px

#8 93px

#18 89px

#28 148px

#38 278px

#48 171px

#58 189px

#68 292px

#78 283px

#9 98px

#19 278px

#29 175px

#39 108px

#49 204px

#59 112px

#69 251px

#79 232px

How it works

Per-column virtualization — Each column independently tracks visible items
Binary search — O(log n) lookup for visible range using cumulative heights
Padding spacers — Culled items replaced with padding to maintain scroll position
ResizeObserver — Visible items measured; heights cached for accurate positioning
Height estimation — Uses getEstimatedHeight before measurement