參考（vue js 添加自動滾動效果(單擊滾動暫停，再次點擊繼續(xù)滾動)）https://blog.csdn.net/weixin_43245095/article/details/107982250

實現(xiàn)方法：主要通過setInterval定時器來改變滾動條scrollTop高度

效果

20200813164152701.gif

使用步驟

1.在需要滾動的區(qū)域添加指定id屬性

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

2.函數(shù)

  methods: {
    // 添加自動滾動
    /* 
      Id   需要滾動的區(qū)域 id名稱
    */
    autoSroll(Id) {
      // flag 為true時停止?jié)L動
      var flag = false;
      // 定時器
      var timer;
      function roll() {
        var h = -1;
        timer = setInterval(function() {
          flag = true;
          //獲取當(dāng)前滾動條高度
          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() {
       //滾動區(qū)域內(nèi)鼠標(biāo)劃過 滾動暫停 鼠標(biāo)劃出 繼續(xù)滾動
            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加載完時調(diào)用函數(shù)

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