Infinite scroll list simulator

Q: Infinite scroll list simulator

**Target Audience:** Engineers preparing for practical JavaScript coding interviews. **Difficulty:** Hard > **How to read this doc:** the real correctness requirement this question specifically tests — that MANY rapid, near-bottom scroll events must collapse into exactly ONE real `loadMore` call, not one per event — was verified directly: 3 rapid calls produced exactly 1 real trigger. ## 1. The problem, restated On every real scroll event, check whether the scroll position is close enough to the bottom (within some threshold) to trigger loading more content — but a fast real scroll gesture can fire MANY scroll events in quick succession while still near the bottom, and a real `loadMore` network call takes real time to complete, so a naive "just check and call `loadMore`" approach would fire many redundant, overlapping real requests. ## 2. Clarifying questions a strong candidate asks | Question | Why it matters | | :--- | :--- | | Collapse rapid repeated triggers into one? | Yes, g

The problem

Problem, as an interviewer would state it: "Build an infinite-scroll controller: detect when a scroll position is near the bottom and trigger a real loadMore — WITHOUT firing multiple overlapping loads while one is still in progress, and correctly stopping once there is genuinely no more data."

Examples:

Code

scroller.checkScroll({ scrollTop, scrollHeight, clientHeight }); // called on every real scroll event
// triggers loadMore ONLY once per near-bottom approach, even with many rapid scroll events

Clarifying questions expected:

Should rapid, repeated scroll events near the bottom (a real, common occurrence during fast scrolling) trigger MULTIPLE loadMore calls, or be correctly collapsed into one?
What signal indicates there is genuinely no more data left to load?
Should this be debounced/throttled on top of the loading-state guard, or is the guard alone sufficient?

Code / implementation expected: Yes — real, direct proof that 3 rapid near-bottom scroll events correctly trigger exactly 1 loadMore call, not 3, and that a second, later scroll correctly triggers a genuinely new load once the first settles.

js-coding
utility
algorithm

Try it yourself

Sketch your approach before you read the solution. That is what the interview tests.

Stuck? Get a hint.

A short nudge toward the approach. It will not give the answer away.

Solution

Target Audience: Engineers preparing for practical JavaScript coding interviews. Difficulty: Hard

How to read this doc: the real correctness requirement this question specifically tests — that MANY rapid, near-bottom scroll events must collapse into exactly ONE real loadMore call, not one per event — was verified directly: 3 rapid calls produced exactly 1 real trigger.

1. The problem, restated

On every real scroll event, check whether the scroll position is close enough to the bottom (within some threshold) to trigger loading more content — but a fast real scroll gesture can fire MANY scroll events in quick succession while still near the bottom, and a real loadMore network call takes real time to complete, so a naive "just check and call loadMore" approach would fire many redundant, overlapping real requests.

2. Clarifying questions a strong candidate asks

The solution is hidden so you can try first

6 min read · 9 sections

Run the code

Edit the code and run it here. Each console line with an expected value becomes a test.

JavaScriptReal, direct proof: 3 rapid near-bottom scroll events correctly collapse into exactly 1 real loadMore call, and a later scroll correctly re-triggers