Virtual scrolling swaps a full DOM list for a fixed-height window — only the rows in (and just around) the viewport are rendered, so opening and scrolling stay fast no matter how many options you feed in.

  • It auto-enables once the option count passes virtual-scroll-threshold (default 100). You can also force it on with enable-virtual-scroll="true".
  • It requires a fixed option-height — the component uses index math on that height to place rows, so the row you want doesn't have to be rendered yet.
  • virtual-scroll-buffer renders a few extra rows above and below the viewport to keep fast scrolling flicker-free.
  • The same technique applies to the selected-items popover for very large selections (paired with badge-height).

VS01 15,000 options

A flat list of 15,000 items — try scrolling, searching, and the jump buttons.

Controls
Quick usage 
 
 
  • enable-virtual-scroll + a fixed option-height are all the demo
						needs; the 15,000 rows are assigned imperatively via el.options.
    •  
  • The v2.0.0 scroll-to API (scrollToIndex / scrollToValue) locates
						the target by index math, so it works even though the target row isn't currently rendered
						— jumping to the last of 15,000 items is instant. Each handler calls el.open() first so there's a scroll container to move.
    •  
  • Raise option-height for taller rows, or grow virtual-scroll-buffer if you see any flicker while scrolling fast.