vue滚动区域内鼠标划过滚动暂停,划出继续滚动

参考（vue js 添加自动滚动效果(单击滚动暂停，再次点击继续滚动)）https://blog.csdn.net/weixin_43245095/article/details/107982250

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

效果

20200813164152701.gif

使用步骤

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).onmouseover = () => {
                // console.log("onmouseover", timer, flag);
                flag = false;
                clearInterval(timer);
            };
            document.getElementById(Id).onmouseout = () => {
                console.log("onmouseout", timer, flag);
                flag = true;
                roll();
            };
            roll();
           // }, 2000);
    },
}

3.dom加载完时调用函数

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