vue页面滚动到某元素显示区域添加class

<div class="businessBox" ref="testref">
    <div class="animated opacity-0" :class="fadeIn?'fadeInDown':''"  :style="    {'animation-delay': 0.1*(i+1)+'s'}" v-for="(item, i) in valu[0].labelList"  :key="i" >
       <div class="tabConTitle" v-html="item.smallTitle" ></div>
    </div>
</div>

 data() {
    return {
      fadeIn:false,
    };
  },
mounted() {
    window.addEventListener('scroll', this.handleScrollbox, true)
  },
methods: {
    handleScrollbox() {
      this.currentScroll = window.pageYOffset //表示当前滚动的位置
      if(!this.$refs.testref)
      return;
      let currentBodayHeight =document.body.clientHeight;
      if (this.currentScroll+currentBodayHeight >= this.$refs.testref.offsetTop) {
        this.fadeIn = true;
      }else{
        this.fadeIn = false;
      }
    },
}