<template>
  <div class="outerBox" ref="outerDom" @scroll="getScrollTop">
    <div v-for="item in 100" :key="item">頁面內(nèi)容{{item}}</div>
    <div class="scrollBox" v-show="isShow" @click="goBack">??</div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      scrollTop: 0, //默認距離頂部的距離
      isShow: false, //控制返回頂部按鈕的顯隱
      scrollTrigger: false, //默認初始值
    };
  },
  computed: {},
  methods: {
    // 返回頂部事件
    goBack() {
      let that = this; // 防止this指向問題
      // 防止頻繁點擊呛哟，故返回頂部后設(shè)置scrollTrigger為初始值
      if (that.scrollTrigger) {
        return;
      }
      // 獲取當(dāng)前距離頂部的距離
      let scrollTop = this.scrollTop;
      console.log(scrollTop);
      let steep = scrollTop / 2000;
      let timer = setInterval(() => {
        that.scrollTrigger = true;
        // 滾動的速度逐漸變快提揍，第一次走2000/1斑匪，然后減去已走的距離信夫，下一次用剩下的距離再減去步進值菊碟，步進值也是不斷變化苟耻，這樣速度會越來越快
        scrollTop -= steep;
        // 步進值不改變的話會勻速緩慢上滑棋弥，不斷增加步進值上滑的距離增加杖爽，視覺效果速度變快
        steep += 20;
        if (scrollTop <= 0) {
          clearInterval(timer);
          that.scrollTrigger = false;
        }
        that.$refs.outerDom.scrollTop = scrollTop;
      }, 30);
    },
    // 監(jiān)聽滾動條
    getScrollTop(e) {
      let that = this; // 防止this指向問題
      // 設(shè)備一屏的高度
      let clientHeight =
        document.documentElement.clientHeight || document.body.clientHeight;
      let scrollTop = e.srcElement.scrollTop;
      this.scrollTop = scrollTop;
      // 判斷距離頂部多少顯示回到頂部圖標(biāo)
      if (scrollTop > clientHeight) {
        that.isShow = true;
      } else {
        that.isShow = false;
      }
    },
  },
};
</script>
<style scoped>
/* 最外層盒子樣式 */
.outerBox {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  overflow-y: auto;
  padding:4px 6px;
}
/* 返回頂部樣式 */
.scrollBox {
  position: fixed;
  right: 10px;
  bottom: 20px;
  font-size: 22px;
  z-index: 99;
}
/* 瀏覽器滾動條樣式 */
::-webkit-scrollbar {
  width: 4px;
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: rgb(174, 174, 174);
  border-radius: 50px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
</style>