ark-floating-scroll

ark-floating-scroll is a React component for scrolling through very long lists — think 500+ page PDFs, infinite tables, large feeds — without forcing the browser to render every item up-front. Only the items currently in the viewport, plus a configurable number of items above and below it, are mounted into the DOM at any moment. As the user scrolls, items entering the window are mounted and items leaving it are unmounted, so the scroll surface stays cheap regardless of total length.

The size of the buffer is controlled by an overscan prop, which defaults to 5 items above and 5 below the viewport.

Why it exists

I built it for a client web app that needed to display a 500+ page PDF inside a scrollable component. Rendering every page at once was crashing the browser. The fix was to keep only the active page in the DOM along with the two pages above and below it, and swap that window in and out on scroll. The result felt seamless to the user — they could scroll, jump, and skim a huge document — while the browser only ever held a handful of pages of layout work at a time.

The library generalises that approach: pass it a render function and a count, and it handles the windowing, the swap, and the scroll-position bookkeeping.

Technology

• React 16.8+ (hooks-based, works with React 17, 18, 19)
• Zero runtime dependencies
• MIT licensed
• Source on GitHub

Install

npm install ark-floating-scroll