Floating Action Button으로 스크롤 제어

이 기사는 서버리스 웹 앱 Mosaic 를 개발하여 얻은 지식을 되돌아보고 정착시키기 위한 핸즈온 기사 중 하나입니다.

아래를 보고 나서 이 기사를 보면 좋은 느낌입니다.
* Vue CLI로 새로운 프로젝트를 만들고 흔한 병아리 구현

소개

최근 앱에서 잘 보이는, 계속 제 위치에 있는 그 버튼.
최근 앱에서 잘 보이는, 한다 ~ 쭉 매끄러운 ~로 스크롤하는 그 기능.
이것을 Vue 웹 앱에 구현합니다.

콘텐츠

이 기사에서는 아래 캡처와 같이 오른쪽 하단에 플로팅 액션 버튼을 설치합니다.
이 버튼을 푹 푹 표시하거나 밀어서 술스루 ~ ~ 위로 스크롤 시키거나합니다.

플로팅 액션 버튼 설치

src/App.vue

      :
    <v-btn fixed fab bottom right color="#BDBDBD88" style="bottom: 100px">
      <v-icon color="white">mdi-chevron-up</v-icon>
    </v-btn>
      :

색상은 회색이었고 세련되게 반투명하게 만들었습니다.

플로팅 액션 버튼을 부드럽게 표시하거나 숨기기

src/App.vue

      :
    <transition name="fade">
      <v-btn fixed fab bottom right color="#BDBDBD88" style="bottom: 100px" v-show="this.isShowUp">
        <v-icon color="white">mdi-chevron-up</v-icon>
      </v-btn>
    </transition>
      :
<script>
      :
  mounted() {
    window.addEventListener("scroll", this.onScreenEvent);
    window.addEventListener("resize", this.onScreenEvent);
    window.addEventListener("load", this.onScreenEvent);
  }, 
  methods:{
    onScreenEvent() {
      this.isShowUp = window.pageYOffset >= 32;
    } 
  }
};
</script>
<style>
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s;
}
.fade-enter,
.fade-leave-to {
  opacity: 0;
}

</style>

홉과 표시/숨기기 위해서 <transition name="fade"> 로 버튼을 둘러싸고, 표시 조건은 v-show 로 지정합니다.

플로팅 액션 버튼을 눌렀을 때 술술 ~ 스크롤

vue-scrollto 라는 라이브러리를 이용하기 위해 설치합니다.

$ npm install vue-scrollto

src/App.vue

<template>
  <v-app>
    <div id="return-to-top"></div>
      :
    <transition name="fade">
      <v-btn fixed fab bottom right color="#BDBDBD88" style="bottom: 100px" v-show="this.isShowUp"
        v-scroll-to="{ element: '#return-to-top', duration: 1000 }"
      >
        <v-icon color="white">mdi-chevron-up</v-icon>
      </v-btn>
    </transition>
      :

duration의 수를 늘리면 더 천천히 스크롤됩니다.
같은 느낌으로 아래쪽으로 스크롤시킬 수도 있으므로, 이번은 솟아오르지만, 필요한 경우는 조사해 구현해 보세요.

App.vue 전체의 코드도 올려 놓는군요.

src/App.vue

<template>
  <v-app>
    <div id="return-to-top"></div>
    <v-navigation-drawer app v-model="drawer">
      <v-list nav dense>
        <v-list-item-group>
          <v-list-item>
            <v-list-item-title>HOME</v-list-item-title>
          </v-list-item>
          <v-list-item>
            <v-list-item-title>ABOUT</v-list-item-title>
          </v-list-item>
        </v-list-item-group>
      </v-list>
    </v-navigation-drawer>

    <v-app-bar app>
      <v-app-bar-nav-icon @click="drawer = !drawer"></v-app-bar-nav-icon>
      <v-toolbar-title>
        Sample Vue Project
      </v-toolbar-title> 
    </v-app-bar>

    <v-content>
      <router-view></router-view>
    </v-content>

    <v-footer app>
      <v-card-title>
        <v-btn fab small class="mx-2" color="white" href="https://twitter.com/w2or3w" target="_blank">
          <v-icon>mdi-twitter</v-icon>
        </v-btn>
        <v-btn fab small class="mx-2" color="white" href="https://www.facebook.com/w2or3w" target="_blank">
          <v-icon>mdi-facebook</v-icon>
        </v-btn>
        <v-btn fab small class="mx-2" color="white" href="https://www.instagram.com/w2or3w" target="_blank">
          <v-icon>mdi-instagram</v-icon>
        </v-btn>
      </v-card-title>
      <v-card-text>
        <p>Copyright © Sample Vue Project</p>
      </v-card-text>
    </v-footer>

    <transition name="fade">
      <v-btn fixed fab bottom right color="#BDBDBD88" style="bottom: 100px" v-show="this.isShowUp"
        v-scroll-to="{ element: '#return-to-top', duration: 1000 }"
      >
        <v-icon color="white">mdi-chevron-up</v-icon>
      </v-btn>
    </transition>

  </v-app>
</template>

<script>
import Vue from "vue";
import VueScrollTo from "vue-scrollto";
Vue.use(VueScrollTo, {
  container: "body",
  easing: "ease", 
  cancelable: true
});

export default {
  name: 'App',
  data: () => ({
    drawer: false,
    isShowUp: false,
  }),
  mounted() {
    window.addEventListener("scroll", this.onScreenEvent);
    window.addEventListener("resize", this.onScreenEvent);
    window.addEventListener("load", this.onScreenEvent);
  }, 
  methods:{
    onScreenEvent() {
      this.isShowUp = window.pageYOffset >= 32;
    } 
  }
};
</script>
<style>
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s;
}
.fade-enter,
.fade-leave-to {
  opacity: 0;
}
</style>

후기

플로팅 액션 버튼이라고 합니다, 그 떠 있는 버튼.
후왓과 표시/숨기거나, 술술 ~ ~ 움직이거나, 최근의 UI는 짜증나요.
이 "후왓 표시"라든지 "술술 ~ 스크롤"에도 실은 정식 명칭이 있거나하는 것입니까. 소프트 아피아라든지, 부드러운 스크롤이라든가?
아니, 멋지다.