[Vuejs] 화면 로드 완료 후 scroll 이동하기

문제인식

• 화면 로드 완료 후, 특정 div 태그 영역으로 초기 scroll 설정 필요

해결방법

• scrollIntoView : div 태그 영역으로 scroll 이동
• window.scrollBy : 지정한 px 만큼 scroll 이동

샘플소스

• html

<div ref="crdArea">
  ...
</div>
<div ref="cardArea">
  ...
</div>
<div ref="loanArea">
  ...
</div>

• script

/*
 * 특정 div 영역으로 scroll 이동 후, 지정한 px 만큼 scoll 추가 이동
 * @param {string} scroll 구분 코드 (CRD, CARD, LOAN)
 * @param {string} scroll 변동 길이
 */
moveScroll(scrollDvC, scrollChgLtn) {
 	setTimeout(() => {
      let scrollArea = '';
      if (scrollDvC === 'CRD') {
        scrollArea = this.refs.crdArea;        
      } else if (scrollDvC === 'CARD') {
        scrollArea = this.refs.cardArea;        
      } else if (scrollDvC === 'LOAN') {
        scrollArea = this.refs.loanArea;        
      }
      // 특정 div 영역으로 scroll 이동
      scrollArea.scrollIntoView({ behavior: 'smooth', block: 'start' });
      
      // 지정한 px 만큼 scoll 추가 이동
      window.scrollBy(0, scollChgLtn);
    }, 500);
}

주의사항

• 화면이 정상 로드되고 DOM 내 태그 위치가 확정된 후, scoll 이동해야 함.
• 조건에 따라 화면 내 show/hide 영역이 존재할 경우,
  DOM 내 태그 위치가 달라지기 때문에, 해당 action 종료 후 스크롤 이동해야 함.
• 상단 타이틀이 있는 경우,
  상단 타이틀 영역 세로 px만큼 scoll 추가 이동해야 특정 태그 위치로 정확하게 이동 가능.

참고

• scrollIntoView parameters 및 샘플
• scrollBy parameters 및 샘플