vue指定范围内底部随意位置向上滚动效果

项目场景：

需求：页面左侧位置做个假的往上滚动抽取效果，尽量真实．

效果：１)上方蓝色渐变为进度条，前90％根据数据量计算增加，接口获取到结果后飞速到达100%，接口较慢时达到90%会进行等待；2)下方数据会从底部随机位置以随机大小随机颜色显示然后垂直向上滚动，到达顶部指定位置后消失，再次会从底部随机位置显示向上滚动，如此循环滚动．（控制速度 位置 数据量后适时替换数据目测真实度更高）

此为滚动过程中两张效果截图

---

实现代码：

//html布局
 <div class="bottom" >
     <el-progress :stroke-width="20" :percentage="percentage" :key="proKey"></el-progress>
     <div class="cloudDiv" ref="cloudDiv"></div>
 </div>

根据数据开始创建dom元素，设置位置．然后调用方法添加属性创建定时器．（数据量过多会产生超级重叠，我根据效果将数据分为15一组，定时器进行不断切换下一组数据）

showRandomPersonWindow () {
  this.$nextTick(() => {
    this.$refs.cloudDiv.style.display = 'block'
    this.$refs.cloudDiv.innerHTML = ''
    const cloudDiv = this.$refs.cloudDiv
    for (let i = 0; i < 15; i++) {
      const dom = (Math.random() + 1) * 400
      if (this.cloudList.length > 15 || i < this.cloudList.length)
        cloudDiv.innerHTML = cloudDiv.innerHTML + "<a href='#' style='position: absolute;color: #333333;text-decoration: none;top:" + dom + "px;display: block;	padding: 5px 8px;'>" + this.cloudList[i].CCDX_NAME + "</a>"
      else
        cloudDiv.innerHTML = cloudDiv.innerHTML + "<a href='#' style='position: absolute;color: #333333;text-decoration: none;top:" + dom + "px;display: block;	padding: 5px 8px;'></a>"
        }
        this.loadyunbiaoqian()
      })
    },

loadyunbiaoqian () {
      const aA = this.$refs.cloudDiv.children
      for (let i = 0; i < aA.length; i++) {
        aA[i].pause = 1
        aA[i].time = null
        this.initialize(i)
        aA[i].onmouseover = function () {
          this.pause = 0
        }
        aA[i].onmouseout = function () {
          this.pause = 1
        }
      }
      window.timer = setInterval(this.starmove, 30)
    },

 修改dom元素的值使其垂直向上移动

starmove () {
      if (!this.flag) return
      for (let i = 0; i < (this.cloudList.length > 15 ? 15 : this.cloudList.length); i++) {
        if (this.$refs.cloudDiv.children[i].pause) {
          this.domove(i)
        }
        if (this.$refs.cloudDiv.children[i].offsetTop <= -this.$refs.cloudDiv.children[i].offsetHeight) {
          this.$refs.cloudDiv.children[i].style.top = this.$refs.cloudDiv.offsetHeight + "px"
          this.initialize(i)
        } else {
          this.$refs.cloudDiv.children[i].style.top = this.$refs.cloudDiv.children[i].offsetTop - this.$refs.cloudDiv.children[i].ispeed + "px"
        }
      }
    },
domove (i) {
      if (this.$refs.cloudDiv.children[i].offsetTop <= -this.$refs.cloudDiv.children[i].offsetHeight) {
        this.$refs.cloudDiv.children[i].style.top = this.$refs.cloudDiv.offsetHeight + "px"
        this.initialize(i)
      } else {
        this.$refs.cloudDiv.children[i].style.top = this.$refs.cloudDiv.children[i].offsetTop - this.$refs.cloudDiv.children[i].ispeed + "px"
      }
    }

修改数据的颜色和大小 （我这边调整较多，所以调用方法获取随机值，如果简单可以直接使用Math.random() 进行计算）

 initialize (i) {
      const colorList = ['#4265ED', '#08979C', '#91D5FF', '#BCC4D0', '#5D7092', '#69C0FF', '#2D2D2D', '#666666', '#2E4CC2', '#0050B3', '#4cadf3', '#058ff3', '#38b3b7']
      const iTimer = parseInt(Math.random() + 2) * 1000
      this.$refs.cloudDiv.children[i].pause = 0
      this.$refs.cloudDiv.children[i].style.fontSize = this.randomNum(18, 28) + 'px'
      this.$refs.cloudDiv.children[i].style.color = colorList[this.randomNum(0, 12)]
      this.$refs.cloudDiv.children[i].style.left = this.randomNum(0, this.$refs.cloudDiv.offsetWidth - this.$refs.cloudDiv.children[i].offsetWidth) + "px"
      clearTimeout(this.$refs.cloudDiv.children[i].time)
      this.$refs.cloudDiv.children[i].time = setTimeout(() => {
        if (!this.flag) return
        this.$refs.cloudDiv.children[i].pause = 1
      }, iTimer)
      this.$refs.cloudDiv.children[i].ispeed = Math.ceil(Math.random() * 17) + 10
    },
    // 取范围内随机值
    randomNum (minNum, maxNum) {
      if (arguments.length == 1)
        return parseInt(Math.random() * minNum + 1, 10)
      else if (arguments.length == 2)
        return parseInt(Math.random() * (maxNum - minNum + 1) + minNum, 10)
      else
        return 0
    },

以下是css样式，该样式仅为我使用的需求，具体大家自行调整

 .bottom {
    margin-top: 45px;
    width: 90%;
    margin-left: 5%;
    height: calc(100% - 175px);
    // 进度条样式
    /deep/ .el-progress-bar {
      padding-right: 0px;
      box-shadow: 4px 11px 16px #bbb5b5;
      border-radius: 4px;
      .el-progress-bar__inner {
        background-image: linear-gradient(to right, #4265ed, #69c0ff);
      }
      .el-progress-bar__outer {
        background: #c9cdd4;
      }
      .el-progress-bar__outer,
      .el-progress-bar__inner {
        border-radius: 4px;
      }
    }
    /deep/ .el-progress__text {
      display: none !important;
    }
    .cloudDiv {
      position: relative;
      height: calc(100% - 50px);
      margin: 30px auto 0;
      overflow: hidden;
      display: block;
    }
    .cloudDiv a {
      position: absolute;
      color: #333333;
      text-decoration: none;
      top: 400px;
      display: block;
      padding: 5px 8px;
      font-family: Microsoft Yahei;
    }
    .cloudDiv a:hover {
      opacity: 1;
      font-weight: bold;
      font-size: 16px;
    }
  }