Frontend: Virtualized List (Visible Range Math)

MediumTypeScript

Description

> This problem is paper-only - see explanation for the canonical React reasoning. A virtualized list renders only the rows currently in viewport (plus a small overscan). The auto-grader validates the visible-range math. Given: - `scrollTop` (px from list top) - `viewportHeight` (px) - `rowHeight` (px, fixed-height assumption) - `totalRows` - `overscan` (extra rows to render above/below) Return `{ start, end }` where rows in `[start, end)` should be rendered. Clamp to `[0, totalRows]`. Apply overscan symmetrically. **For the auto-grader:** implement `visibleRange({ scrollTop, viewportHeight, rowHeight, totalRows, overscan })`.

Example 1

Input: {scrollTop:0,viewportHeight:300,rowHeight:50,totalRows:100,overscan:0}

Output: {start:0,end:6}

Example 2

Input: {scrollTop:200,viewportHeight:300,rowHeight:50,totalRows:100,overscan:2}

Output: {start:2,end:12}

Explanation: First visible row idx 4 (200/50). Last visible 9 ((200+300)/50=10, exclusive). Overscan of 2 widens to [2, 12).

Constraints

- All numeric inputs are non-negative integers. - rowHeight >= 1

Loading editor...