滚动条自动滚动

滚动条自动滚动

单击滚动暂停

再次点击继续滚动

1、给div设个id

id随便写，但是需要同步修改mounted里面的id

<div class="main" id="scroll_in2">

</div>

2、定时器

data () {
  return {
    timerRoll: null, // 滚动条滚动定时器
  };
},

3、自动滚动函数

autoSroll (Id) {
  // flag 为true时停止滚动
  let flag = false;
  let that = this;
  function roll () {
    let h = -1;
    that.timerRoll = setInterval(function() {
      flag = true;
      //获取当前滚动条高度
      let current = document.getElementById(Id).scrollTop;
      if (current == h) {
        //滚动到底端,返回顶端
        h = 0;
        document.getElementById(Id).scrollTop = h + 1;
      } else {
        //以25ms/3.5px的速度滚动
        h = current;
        document.getElementById(Id).scrollTop = h + 1;
      }
    },50);
  }
  //滚动区域内单击鼠标 滚动暂停 再次点击鼠标 继续滚动
  document.getElementById(Id).onclick = () => {
    // console.log("点击了",timerRoll,flag);
    if (flag) {
      flag = false;
      clearInterval(that.timerRoll);
    } else {
      roll();
    }
  };
  roll();
},

4、mounted

mounted () {
  this.autoSroll("scroll_in2");
},

5、清除定时器

不清除定时器，那么退出页面，控制台就疯狂报错

beforeDestroy () {
  clearInterval(this.timerRoll);
  this.timerRoll = null
},