VUE + JS向上滚动一屏后重新滚动

HTML： 

<div id="tableBox">
  <div id="table1">
    <div v-for="(item, index) in list" :key="index">
      <div>......</div>
    </div>
  </div>
  <div id="table2"></div>
</div>

 JS：

// 设置定时器滚动
setTimer() {
  let box = document.getElementById("tableBox");
  let t = document.getElementById("table1");
  box.scrollTop = 0;
  this.timer = setInterval(() => {
    if (box.scrollTop >= t.scrollHeight) {
      box.scrollTop = 0;
      if (this.timer) clearInterval(this.timer);
      // 滚完一屏，暂停一秒再滚动
      setTimeout(() => {
        this.setTimer();
      }, 1000);
    } else {
      box.scrollTop++;
    }
  }, 50);
},

CSS：

#tableBox {
  width: 100%;
  height: 370px;
  overflow: hidden;
  #table1 {
    width: 100%;
  }
  #table2 {
    height: 372px; //设置一屏高度多几个像素，方便第一屏滚出
  }
}