How to Build Bidirectional Infinite Scroll in React

Most infinite scroll tutorials cover one direction: down. Detect the bottom, load more, done. But real-world apps need to scroll both ways too: chat history, log viewers, timelines. And scrolling up introduces a problem that scrolling down never has. In this guide I'll build a bidirectional infinite scroll from scratch. I'm using React and @tanstack/react-virtual , but the technique itself is just math on scroll offsets. It works the same way in Vue, Svelte, or vanilla JS. Live Demo | Source Code The problem, visually Imagine a list of 1000 items. The user is looking at item #50. You prepend 200 items above. What you expect: the user still sees item #50. What actually happens: the scroll position stays at the same pixel offset. But item #50 is now at a different pixel offset (it shifted down by the height of 200 new items). The user sees item #250. The content jumped. BEFORE PREPEND AFTER PREPEND (broken) ┌─────────────┐ ┌─────────────┐ │ item 48 │ │ item 248 ←── wait, what? │ item 49