Angular에서 뒤로가기 시 스크롤 위치 복원

Angular에서 뒤로가기 시 스크롤 위치 복원

스크롤이 많은 페이지에서 아이템별 상세 페이지를 확인한 후 뒤로가기 했을 때, 기본적으로 처음부터 다시 로드되는 경우가 많습니다. 일부 사용자는 이 방식을 선호할 수도 있지만, 대부분의 경우 이는 불편할 수 있습니다.

예를 들어, 사용자가 아이템을 클릭한 위치에 연관된 다른 아이템들이 있을 때, 또는 클릭한 아이템이 내가 찾던 것인지 확인해야 할 때, 이미 여러 번 스크롤을 했던 페이지가 초기화되면 다시 스크롤을 내려야 하는 번거로움이 발생합니다.

따라서, 사용자 경험을 개선하기 위해서는 뒤로가기 했을 때 이전에 클릭한 위치로 돌아가도록 하는 편이 사용자에게는 유리합니다.

* 스크롤 이벤트는 아래 링크 참조

angular Infinite Scroll을 이용한 페이징 처리 :: 희운의 일상 블로그 (tistory.com)

angular Infinite Scroll을 이용한 페이징 처리

1. 클릭한 위치 기억하기

:  상세 페이지 이동시 localStorage로 스크롤 세로 위치값 저장

public goUrl(item_no: any) {
     localStorage.setItem('scrollPosition', window.scrollY.toString()); 
     this.router.navigate('item/'+ item_no);
}

2. 뒤로 가기시 저장된 위치로 스크롤 이동하기

:  아래 처럼 뷰가 모드 로드된 후에 실행하는걸 권장 (ngAfterViewInit)

public ngAfterViewInit() {
        // 뷰가 모두 로드된 후 실행할 코드
        this.scrollToElementWhenReady('scrollPosition');
}

public scrollToElementWhenReady(elementId: string) {
        const scrollPosition = localStorage.getItem(elementId);
        if (scrollPosition) {
          localStorage.removeItem(elementId); // 스크롤 위치값이 있는 경우 삭제처리

          const checkElement = () => {
            window.scrollTo({ top: Number(scrollPosition), behavior: 'smooth' });
          };

          // 최초 호출
          checkElement();
        }
}