Compute a virtual list's visible range

Arguments

options{ scrollTop: number; rowHeight: number; viewportHeight: number; totalRows: number; overscan?: number }

The pixel-space inputs from the scroller: current scroll offset, per-row height, visible height, total row count, and an optional buffer of extra rows to render on each side.

Returns

{ start: number; end: number; offsetTop: number } — The inclusive row index range to render plus the pixel offset to apply so the first rendered row sits in the right place.

Examples

visibleRange({ scrollTop: 0, rowHeight: 40, viewportHeight: 400, totalRows: 1000 });
// => { start: 0, end: 9, offsetTop: 0 }

visibleRange({ scrollTop: 100, rowHeight: 40, viewportHeight: 400, totalRows: 1000 });
// => { start: 2, end: 12, offsetTop: 80 }

visibleRange({ scrollTop: 400, rowHeight: 40, viewportHeight: 400, totalRows: 1000, overscan: 3 });
// => { start: 7, end: 22, offsetTop: 280 }

What it has to do

• Return { start, end, offsetTop } with an inclusive end.
• Subtract overscan from the start and add it to the end, defaulting overscan to 0.
• Clamp both indices into 0 .. totalRows - 1 and never let end fall below start.
• Compute offsetTop as start * rowHeight.
• Return { start: 0, end: -1, offsetTop: 0 } when totalRows is 0.

Notes

• end is **inclusive** so a caller can write for (let i = start; i <= end; i += 1) without off-by-one worries. The { start: 0, end: -1 } sentinel for the empty case makes that loop iterate zero times.
• offsetTop is what you apply to the container of the rendered rows — either as padding-top or as a translateY — so the scrollbar still thinks the list is full height.