프론트엔드 개발자를 위한 5가지 스크롤 복구 시나리오와 실전 코드 팁

SPA(Single Page Application) 환경에서는 브라우저의 기본 스크롤 복구 기능이 제대로 작동하지 않아 사용자 경험을 저해할 수 있다. 이는 JavaScript가 콘텐츠를 동적으로 변경하면서 브라우저가 페이지 변화를 인지하지 못하거나, 비동기 데이터 로딩으로 인해 페이지 높이가 변하기 때문에 발생한다.

상황에 따른 해결 전략은 다음과 같다.

• 정적 데이터: History API를 활용하여 scrollY 값을 저장하고 popstate 이벤트 시점에 복구한다.
• 동적 데이터: 절대적인 위치 대신 상대적인 기준점을 활용한다. sessionStorage에 스크롤 위치와 함께 화면에 보이는 아이템 ID를 저장한 뒤, 데이터 로드 완료 후 해당 아이템으로 scrollIntoView를 수행한다.
• 레이지 로딩/무한 스크롤: 스켈레톤 UI로 레이아웃 공간을 미리 확보하고, 저장된 지점까지 필요한 데이터를 배치(Batch) 단위로 미리 로드하여 스크롤 위치를 재현한다.