vue 列表上下無縫滾動輪播

 

滾動從頭到尾從上到下，最后首位相接，無限滾動

 // 判斷是否滾動
    setTopGoBom() {
      let dom = this.$refs[this.bodyTableId];
      if (dom) {
        let allH = dom.offsetHeight;
        let chiDom = dom.firstElementChild;
        let chiLength = dom.children.length;
        let chiH = 0;
        let chiAllH = 0;
        // 存在子dom
        if (chiDom) {
          chiH = chiDom.offsetHeight;
          chiAllH = chiH * chiLength;
          // 比較行高
          if (chiAllH > allH) {
            this.stateScorl(dom, chiDom);
          }
        }
      }
    },
    // 開始滾動
    stateScorl(dom, chiDom) {
      let _this = this;
      let timePop = 1;
      let offPop = this.resultNumRun;
      let chiH = chiDom.offsetHeight;
      // 清除前定時
      if (this.timeScorl) {
        clearInterval(this.timeScorl);
      }
      if (this.timeScorl1) {
        clearTimeout(this.timeScorl1);
      }
      // 重置起始滾動條高度
      let resultH = 0;
      this.timeScorl = setInterval(scorlRun, timePop);
      // 滾動方式
      function scorlRun() {
        resultH = resultH + offPop;
        if (resultH > chiH) {
          if (_this.timeScorl) {
            clearInterval(_this.timeScorl);
          }
          if (this.timeScorl1) {
            clearTimeout(this.timeScorl1);
          }
          // 獲取第一個節點並刪除 添加到隊尾
          let fistnode = dom.firstElementChild;
          dom.removeChild(fistnode);
          dom.appendChild(fistnode);
          // 重置起始滾動條高度
          resultH = 0;
          // 1秒后重新滾動
          _this.timeScorl1 = setTimeout(function() {
            _this.timeScorl = setInterval(scorlRun, timePop);
          }, 1000);
        } else {
          setScrollTop(dom, resultH);
        }
      }
      //設置窗口滾動條高度
      function setScrollTop(domIn, top) {
        if (!isNaN(top)) domIn.scrollTop = top;
      }
    },