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

#10 251px

#20 188px

#30 118px

#40 284px

#50 105px

#60 154px

#1 181px

#11 240px

#21 136px

#31 296px

#41 98px

#51 299px

#61 290px

#71 133px

#2 138px

#12 213px

#22 109px

#32 146px

#42 254px

#52 209px

#62 118px

#72 226px

#3 143px

#13 259px

#23 120px

#33 158px

#43 287px

#53 198px

#63 115px

#73 299px

#4 172px

#14 99px

#24 184px

#34 104px

#44 188px

#54 215px

#64 187px

#74 221px

#5 173px

#15 251px

#25 134px

#35 290px

#45 147px

#55 100px

#65 258px

#75 144px

#6 132px

#16 134px

#26 185px

#36 202px

#46 297px

#56 212px

#66 236px

#76 98px

#7 182px

#17 278px

#27 260px

#37 217px

#47 225px

#57 210px

#67 286px

#8 200px

#18 105px

#28 273px

#38 208px

#48 193px

#58 247px

#68 271px

#9 81px

#19 125px

#29 87px

#39 190px

#49 126px

#59 122px

#69 119px

#79 192px

#89 245px

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