vue监听指定元素滚动返回顶部

<template>
    <div class="box" ref="home">
        <div class="data">
            <template v-for="(item,index) in list">
                <p :key="index">{{item}}</p>
            </template>
        </div>
        <div class="backTop" v-show="controlReturnTop">
            <van-button type="default" @click="flyback">
                <van-icon name="arrow-up" size="20" />
            </van-button>
        </div>
    </div>
</template>

<script>
export default {
  name:'returnTop',
  data(){
     return{ 
       controlReturnTop: false, // 控制返回顶部布尔值
       list:[1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20]
    }
  },
  mounted(){
  	// querySelector: 匹配元素的 CSS 选择器。
  	// addEventListener:主要用于指定元素添加事件。
    document.querySelector('.box').addEventListener('scroll', this.judge)
  },
  methods: {
    judge(){
      // 判断距离顶部大于100则显示
      if (this.$el.scrollTop > 100)  this.controlReturnTop = true
      // 否则隐藏
      else this.controlReturnTop = false
    },
    flyback(){
      // 平滑过渡效果回到顶部
      this.$refs.home.scrollTo({
        top: 0,
        behavior: 'smooth',
      });
    }
  }
}
</script>

css

<style>
*{
    padding: 0;
    margin:0;
}
.box {
    width:100%;
    height:100vh;
    overflow: hidden;
    overflow-y: auto;
}
.data {
    width:100%;
}
.backTop {
  position: absolute;
  bottom:15vh;
  right:1.5vw;
  z-index: 2000;
  background:red;
}
p{
    height:10vh;
    border:1px solid skyblue;
    display: flex;
    align-items: center;
}
</style>

效果图：