好用的滚动方法，列表滚动

上下滚动

// javascript原生自动滚动
export default function startmarquee(lh, speed, delay, marqueeObj) { // lh---每行列表的高度，speed---滚动的速度，delay---间隔多久滚动一次,marqueeObj---需要实现这个效果的id
    var p = false;
    var t;
    var o = document.getElementById(marqueeObj);
    o.innerHTML += o.innerHTML;
    o.style.marginTop = 0;
    o.onmouseover = function() { p = true; }; // 鼠标移入，停止滚动
    o.onmouseout = function() { p = false; };// 鼠标移出，继续滚动

    function start() {
        t = setInterval(scrolling, speed); // 定时器，自动滚动
        if (!p) o.style.marginTop = parseInt(o.style.marginTop) - 1 + 'px';
    }

    function scrolling() {
        if (parseInt(o.style.marginTop) % lh != 0) {
            o.style.marginTop = parseInt(o.style.marginTop) - 1 + 'px';
            if (Math.abs(parseInt(o.style.marginTop)) >= o.scrollHeight / 2) o.style.marginTop = 0;
        } else {
            clearInterval(t);
            setTimeout(start, delay);
        }
    }
    setTimeout(start, delay);
};

使用方法：

<div class="scrollDiv">
   <div class="data-source" id="data-source">
     <div class="data-e" v-for="(item, i) in tableData" :key="i">
       <div class="c-e">
         {{ item['indicatorDirection'] }}
       </div>
       <div class="c-e">
         {{ item['street'] }}
       </div>
       <div class="c-e">
         {{ item['indicatorName'] }}
       </div>
       <div class="c-e" :style="item['eventStatus']=='执行中'&&{'color':'#7AFFA2'}">
         {{ item['eventStatus'] }}
       </div>
     </div>
   </div>
 </div>

.scrollDiv{
  height: 190px;
  overflow: auto;
  &::-webkit-scrollbar {
    display:none
  }
}

import scrollMethod from '@/utils/scroll';
this.$nextTick(() => {
  if (this.tableData.length > 5) {
    scrollMethod(38, 20, 1000, 'data-source');
  }
});