HN Showcase
Back to browse
UX-demo Seamless scroll restoration for infinite lists in Web apps

UX-demo Seamless scroll restoration for infinite lists in Web apps

by jeremy_su·Feb 24, 2026·1 point·0 comments
Visit ProjectView on HN

AI Analysis

●●SolidSolve My ProblemShip ItBig Brain

Fixes the infinite-scroll back-button break with state caching and instant hydration.

Strengths
  • •Solves a real, frequent SPA friction point: users lose scroll position when navigating back.
  • •Bidirectional scrolling (logs, chat history) is less common; upward and downward loading in one component adds scope.
  • •Multi-framework support (React, React Native, Vue) via abstraction layer, not bolt-on.
Weaknesses
  • •Virtual scrolling libraries like react-window and react-virtual already handle large lists efficiently.
  • •No evidence of performance benchmarks or comparison to existing scroll-preservation patterns (history API, Session Storage).
Target Audience

Frontend developers building SPAs with feeds, logs, or chat-like infinite-scroll interfaces.

Similar To

react-window · react-virtual · Intersection Observer API

Post Description

Most SPA infinite scrolls break the "Back" button—users click a post, hit back, and lose their position. Many devs switch to pagination just to avoid this headache, even when infinite scroll offers a better UX.

This demo shows a "Save and Restore" approach that makes web lists feel native:

* State Persistence: Caches currently loaded records and the scroll offset before navigation. * Instant Hydration: On back-navigation, it checks for cached state to re-render the list immediately. * Precise Restoration: Snaps the user back to their exact scroll position without layout shift.

Demo: https://suhaotian.github.io/broad-infinite-list/?demo=news

I'd love to hear how you all handle this in your apps.

Similar Projects