vue自动轮播滚动

<div class="getList" v-if="getList.length > 0">
      <div class="getList-title">
        <span>昵称</span>
        <span>奖品</span>
        <span>获奖时间</span>
      </div>
      <div id="getList-items" class="getList-items">
        <div class="getList-item" v-for="(item, index) in getList" :key="index">
          <span class="getList-tel">{{
            item.recvusr.substr(0, 3) + "****" + item.recvusr.substr(7)
          }}</span>
          <span class="getList-tel">{{ item.ptext }}</span>
          <span class="getList-tel">{{ item.indate }}</span>
        </div>

        <div
          class="getList-item"
          v-for="(item, index) in getList2"
          :key="index + 'k'"
        >
          <span class="getList-tel">{{
            item.recvusr.substr(0, 3) + "****" + item.recvusr.substr(7)
          }}</span>
          <span class="getList-tel">{{ item.prize }}</span>
          <span class="getList-tel">{{ item.getTime }}</span>
        </div>
      </div>
    </div>

.getList{
        width: 100%;
        height: 4rem;
        
        .getList-items{
            height: 3.5rem;
            overflow-y: auto;
        }

        .getList-title{
            width: 100%;
            display: flex;
            flex-direction: row;
            justify-content: space-around;
            align-items: center;
            margin-bottom: 0.2rem;

            span{
                width: 33.33%;
                color: 7d351f;
                text-align: center;
                text-shadow: #fff 1px 0 0, #fff 0 1px 0, #fff -1px 0 0, #fff 0 -1px 0;
                font-size: .875rem;
                font-weight: bold;
            }

        }

        .getList-item{
            width: 95%;
            display: flex;
            flex-direction: row;
            justify-content: space-around;
            align-items: center;
            margin: 0 auto;
            margin-top: .3125rem;

            .getList-tel{
                width: 30%;
                color: white;
                font-size: .625rem;
                text-align: center;
            }
        }
    }

getList: [
        // {
        //   recvusr: "13329294400",
        //   ptext: "1",
        //   indate: "2021-09-06 10:22",
        // },
        // {
        //   recvusr: "wret12345678910",
        //   ptext: "2",
        //   indate: "2021-09-06 10:22",
        // },
        // {
        //   recvusr: "12399",
        //   ptext: "3",
        //   indate: "2021-09-06 10:22",
        // },
        // {
        //   recvusr: "KK",
        //   ptext: "4",
        //   indate: "2021-09-06 10:22",
        // },
        // {
        //   recvusr: "KK",
        //   ptext: "5",
        //   indate: "2021-09-06 10:22",
        // },
      ],
      getList2: [],

// 滚动
    move(id) {
      let contentH;
      let viewH;

      if (id == "getList-items") {
        contentH = this.getList.length * 21;
        viewH = 56;
      }

      if (viewH + 8 > contentH) {
        console.log("当前内容不足以上下轮播");
        document.getElementById(id).scrollTop = 0;

        return;
      } else {
        document.getElementById(id).scrollTop = 0;
        this.getList2 = this.getList;
      }

      let interval = setInterval(() => {
        if (document.getElementById(id).scrollTop + 8 >= contentH) {
          //滚动条距离顶部的值恰好等于list1的高度时，达到滚动临界点，此时将让scrollTop=0,让list1回到初始位置，实现无缝滚动
          document.getElementById(id).scrollTop = 3;
        } else {
          document.getElementById(id).scrollTop++;
        }
      }, 40);

      return interval;
    },

if (vm.getList.length > 0) {
              setTimeout(() => {
                vm.interval1 = vm.move("getList-items");
              }, 200);
            }