[Nuxt.js & Vue.js] 스크롤 위치 유지하는 방법

개요

무한 스크롤 구현 후, 사용자가 목록을 쭉 내리다가 특정 목록 아이템에 상세 보기 페이지로 진입 후, '뒤로가기'를 했을 때, 사용자가 보던 스크롤 위치를 그대로 보여주기 위한 기능이 필요했다.

 

스크롤 위치를 보존하는 방법을 소개한다.

 

컴포넌트 구조

components
  +- List.vue  👈 destroyed 훅에서 store에 스크롤 위치(scrollY) 저장
  +- ListItem.vue
pages
  +- index.vue   👈 저장된 스크롤 위치로 mounted 훅에서 이동

 

pages/index.vue

index.vue가 렌더링된 후에 스크롤 위치 이동

export default {
  name: 'something',
  mounted() {
    setTimeout(() => {
      window.scrollTo(0, this.$store.state.feedback.scrollHeight || 0);
    });
  },
  // ...
}

components/List.vue

destroyed() {
  // 👇 List.vue 컴포넌트가 브라우저 컨텍스트에서 사라질 때 store에 현재 스크롤 높이 저장
  this.SET_SCROLL(scrollY); 
  // 👇 페이지 이동 라우터가 목록 아이템의 상세페이지가 아닌 경우, store에 저장된 관련 state를 모두 날린다.
  if (this.$route.name !== 'feedback-id') this.CLEAR_FEEDBACK();
},