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

#10 259px

#20 101px

#30 260px

#40 98px

#50 161px

#60 217px

#1 162px

#11 270px

#21 115px

#31 250px

#41 174px

#51 81px

#61 144px

#71 290px

#2 94px

#12 211px

#22 126px

#32 281px

#42 252px

#52 296px

#62 243px

#72 153px

#3 195px

#13 117px

#23 266px

#33 220px

#43 291px

#53 193px

#63 214px

#4 257px

#14 212px

#24 197px

#34 81px

#44 174px

#54 228px

#64 296px

#5 125px

#15 86px

#25 112px

#35 120px

#45 184px

#55 284px

#65 282px

#75 273px

#85 253px

#6 107px

#16 202px

#26 171px

#36 281px

#46 274px

#56 93px

#66 291px

#76 198px

#7 228px

#17 178px

#27 187px

#37 248px

#47 90px

#57 195px

#67 97px

#8 184px

#18 104px

#28 169px

#38 239px

#48 129px

#58 225px

#68 175px

#78 250px

#9 175px

#19 133px

#29 86px

#39 117px

#49 239px

#59 249px

#69 221px

#79 211px

#89 81px

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