# v-scroll

ptq124

회사에서 스크롤할때 따라다니는 메뉴를 구현했다. 구글링을 했었지만 자료가 부족하여 이번 블로그를 통해 개발했던 내용을 정리하고자 한다. vuetify v-scroll 맨처음에 이벤트리스너를 사용하여 스크롤 이벤트를 감지하도록 했었지만 vuetify에서 제공하는 Scroll API가 있었다. vuetify 설치하고 사용하면 아래와 같이 사용하면됨 Scroll 관련 내장함수들 해당기능을 구현하기 위해 필요한 내장함수들을 알아보자 getBoundingClientRect().top 현재 화면 기준으로 해당 엘리멘트의 좌표값을 반환 스크롤에 따라 값이 변함, 실시간 동적으로 움직이는 좌표를 구할때 사용 window.pageYOffset 현재 스크롤이 얼마나 됐는지 px 단위로 반환하는 속성 내가 사용한 로직 처음 렌더링시 초기 위치 topPos를 정함 window.pageXOffset**을

gykim

1. 전체 페이지가 아닌 헤더 아래에 스크롤 생성 > 2. 영역에 스크롤이 생기면 ScrollTop(△) 버튼 표시 전체 페이지가 아닌 헤더 아래에 스크롤 생성 css 조정 필요! v-app 을 이용했을 경우 v-application--wrap min-height이 100vh로 잡혀있음. 따라서 v-main의 min-height을 100%로 설정 scroll target div의 max-height도 100%로 설정 scroll top 버튼 표시하기 참고: https://vuetifyjs.com/en/directives/scroll/#self