[vue3] scroll 관련 이벤트가 작동하지 않을 때 확인할 것 (feat. scrollBehavior)

발단

사이드바로 메뉴를 클릭하면 특정 위치로 옮기는 기능을 구현하던 중, 정확하게 컴포넌트의 클래스나 id를 맞추어도 구상한대로 이벤트가 작동하지 않는 이슈가 있었다. 

 

해결 과정

1. 로직 확인

    scrollToComponent() {
      const componentName = this.$route.name;

      if (componentName) {
        const componentId = this.getComponentName(componentName);

        const componentData = document.querySelector(`#${componentId}`);

        if (componentData) {
          const yOffset = componentData.getBoundingClientRect().top;
          window.scrollBy({ top: yOffset - 270, behavior: "smooth" });
        }
      }
    },

 

querySelector에서 찾고 있는게 정상적인 값이기도 하고 동적으로 컴포넌트명에 대한 id를 만들어주었다보니 동적으로 구현된게 아닌가 하는 여러 갖가지 확인을 했지만 모든 것이 일치한다고 판단을 했다. 1시간동안 계속 확인했던 것 같다.. 

 

2. 스크롤을 막는 기능 확인

구글링해보니, vue에서 전역으로 스크롤을 제어하는 scrollBehavior 에 관련된 내용이 있었다. 

https://router.vuejs.org/guide/advanced/scroll-behavior.html

Vue Router | The official Router for Vue.js

 

라우터에서 페이지를 렌더링할 때 특정 위치를 지정할 수 있다. 

scrollBehavior (to, from, savedPosition) {
  if (savedPosition) {
    return savedPosition
  } else {
    return { x: 0, y: 0 }
  }
}

내가 구현하려는 기능으로 작동하되, 그렇지 않을 경우 디폴트값으로 작동하도록 임시로 세팅해두었는데, 이 부분을 주석처리하니 스크롤이 잘 작동했다. 

여기서 중요한 점은 잘못된 값이나 빈 객체가 반환되면 스크롤이 발생하지 않는다는 것이다.

나는 처음에 top: 0, left: 0으로 설정했으나 x,y를 써서 초기화하라는 의견들이 있어 시도했지만 다 스크롤을 막고 있었다. 

 

scrollBehavior 을 쓰지 않아도 스크롤이 원하는대로 작동하고 있고, 특정 포지션을 지정할 때의 기준이 직접적인 수치가 아니라 컴포넌트의 id를 확인하기 때문에 당장 굳이 쓸 필요가 없다고 판단했고, 스크롤에 대한 특별한 이벤트를 더 지정할 일이 없어서 그대로 지워질 것 같다.. 나중에 다른 프로젝트에서 쓰일 일이 있을지 모르겠다.