[vue.js] 클릭시 focus 이벤트

사이드바 눌렀을 경우 해당 화면 이동

위 그림처럼 메뉴 클릭시 해당 화면으로 이동하는 방법에는 2가지가 있다. 

ID를 이용한 방법과 scrollTo 를 사용하는 방법이다.

ID는 원하는 위치로 이동하고자 하는 곳에 id 값을 지정하고, 사이드 메뉴 클릭이벤트에 해당 id 를 부여하면 된다.

window.location.href = '#id명'

 

두번째는 사이드 메뉴 클릭시 보여주고자 하는 값의 TOP위치를 계산해서 아래와 같이 설정해준다.

window.scrollTo({top:'위치값', behavior:'smooth'});

 

완성된 모습

 

화면의 전체 스크롤 크기를 알고 싶을때 파이어폭스에서는 scrollMaxY가 있는데,

크롬이나 다른 브라우져에는 없다,

이런 경우 아래와 같이 작성해주면  scrollMaxY와 똑같은 기능을 구현 할 수 있다.

const scrollMaxY = document.documentElement.scrollHeight - document.documentElement.clientHeight;