🚀 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 199px

#10 251px

#20 199px

#30 152px

#40 262px

#50 106px

#60 209px

#1 85px

#11 251px

#21 134px

#31 94px

#41 288px

#51 189px

#61 218px

#71 288px

#2 285px

#12 278px

#22 217px

#32 213px

#42 283px

#52 146px

#62 136px

#3 295px

#13 250px

#23 89px

#33 98px

#43 113px

#53 117px

#63 182px

#4 197px

#14 83px

#24 268px

#34 138px

#44 176px

#54 92px

#64 172px

#74 192px

#5 289px

#15 215px

#25 125px

#35 88px

#45 179px

#55 277px

#65 188px

#6 205px

#16 85px

#26 166px

#36 258px

#46 148px

#56 191px

#66 105px

#76 235px

#7 126px

#17 230px

#27 283px

#37 131px

#47 182px

#57 84px

#67 133px

#8 198px

#18 156px

#28 104px

#38 106px

#48 131px

#58 240px

#68 184px

#78 137px

#9 216px

#19 196px

#29 263px

#39 189px

#49 108px

#59 184px

#69 268px

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