vue实现向上无限滚动

               

<template>
<div class="tradeListDiv"
               ref="parent"
               @mouseover="scrollPause = true"
               @mouseleave="scrollPause = false">
            <div ref="child">
              <div class="tradeItemDiv"
                   v-for="(item,index) in tradeList"
                   :key="index">
                
              </div>
            </div>
          </div>
</template>
data(){
   return{
      intervalId：null,
      scrollPause: false，
      tradeList:[]，//数据
  }
mounted () {
    this.intervalId = setInterval(this.autoScroll, 50);
  },
  destroyed () {
    clearInterval(this.intervalId);
  },
  methods: {
    autoScroll () {
      try {
        if (this.scrollPause) return;
        const scrollTop = this.$refs.parent.scrollTop;
        const parentHeight = this.$refs.parent.offsetHeight;
        const childHeight = this.$refs.child.offsetHeight;
        if (scrollTop + parentHeight >= childHeight - 5) {
          this.scrollPause = true;
          setTimeout(() => {
            try {
              this.scrollPause = false;
              this.$refs.parent.scrollTop = 0;
            } catch (_) { }
          }, 1000);
        } else {
          this.$refs.parent.scrollTop++;
        }
      } catch (_) { }
    },
}
<style>
   .tradeListDiv {
       margin-top: 15px;
       height: 3rem;
       overflow: hidden;
       overflow-y: auto;
     }
   .tradeItemDiv {
       margin-bottom: 30px;
       display: flex;
       align-items: center;
    }
</style>