vue js 添加自动滚动效果(单击滚动暂停，再次点击继续滚动)

实现方法：主要通过setInterval定时器来改变滚动条scrollTop高度

效果

使用步骤

1.在需要滚动的区域添加指定id属性

<div id="scroll_in2" class="htp-list scroll_in"></div>

2.函数

  methods: {
    
    
    // 添加自动滚动
    /* 
      Id   需要滚动的区域 id名称
    */
    autoSroll(Id) {
    
    
      // flag 为true时停止滚动
      var flag = false;
      // 定时器
      var timer;
      function roll() {
    
    
        var h = -1;
        timer = setInterval(function() {
    
    
          flag = true;
          //获取当前滚动条高度
          var 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);
      }
      // setTimeout(function() {
    
    
        //滚动区域内单击鼠标 滚动暂停 再次点击鼠标 继续滚动
        document.getElementById(Id).onclick = () => {
    
    
          console.log("点击了", timer, flag);
          if (flag) {
    
    
            flag = false;
            clearInterval(timer);
          } else {
    
    
            roll();
          }
        };
        roll();
      // }, 2000);
    },
}

3.dom加载完时调用函数

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