vuetify 컨텐츠 영역에 scroll 적용하기 (스크롤이 생길 때만 Scroll Top 버튼 표시)

1. 전체 페이지가 아닌 헤더 아래에 스크롤 생성
2. 영역에 스크롤이 생기면 ScrollTop(△) 버튼 표시

<div id="app>
	<div class="v-application--wrap>
  		<header></header>
        <main>
        	<div class="v-main__wrap">
            	<div>
                	<!-- 바로 여기! -->
                </div>
            </div>
        </main>
    </div>
</div>

1. 전체 페이지가 아닌 헤더 아래에 스크롤 생성

• css 조정 필요!
• v-app 을 이용했을 경우 v-application--wrap min-height이 100vh로 잡혀있음.
  1. 따라서 v-main의 min-height을 100%로 설정
  2. scroll target div의 max-height도 100%로 설정

2. scroll top 버튼 표시하기

<v-app id="app>
	<v-app-bar>
    </v-app-bar>
    <v-main>
    	<v-container id="scroll-target" class="overflow-y-auto">
        </v-container>
        <v-btn
        	v-show="scroll>0"
            fab
            fixed
            dark
            bottom
            v-scroll:#scroll-target="onScroll"
            @click="goTop"
        >
        	<v-icon>mdi-menu-up</v-icon>
        </v-btn>
    </v-main>
</v-app>

<script>
...
data() {
	return {
    	scroll: 0,
        scrollTarget: null
    };
},
mounted() {
	// goTop을 위해 mount 시 element 설정
	this.scrollTarget = document.getElementById('scroll-target');
},
methods: {
    onScroll(e) {
    	// 스크롤 움직일 때 마다 호출됨
    	this.scroll = e.target.scrollTop;
    },
	goTop() {
		if (this.scrollTarget) {
			this.scrollTarget.scrollTop = 0;
		}
    }
}
</script>

참고: https://vuetifyjs.com/en/directives/scroll/#self