让ul li 或者table 进行循环往上滚屏

最近在项目中需要使用消息公告滚屏效果，当鼠标移到滚屏内容时，停止滚屏，当鼠标移开时继续滚屏。我只做记录下：

<div style="display:inline">
<span v-show="!showCollapse" class="icon-padding">
  <Icon type="ios-arrow-right"></Icon>
</span>
<span v-show="showCollapse" class="icon-padding">
  <Icon type="ios-arrow-down"></Icon>
</span>
</div>
<!-- 上面是图标并使用div包裹显示在一行，下面是滚屏内容 -->
  <div  id="scroll-message" class="scroll-message-style">
      <ul>
          <li>发现CNVD-2018-01031IBM WebSphere Portal跨站脚本漏洞，请尽快自查</li>
          <li>跨站脚本漏洞，请尽快自查</li>
          <li>发现CNVD-2018-01031IBM WebSphere Portal跨站脚本漏洞，请尽快自查</li>
          <li>跨站脚本漏洞，请尽快自查</li>
          <li>发现CNVD-2018-01031IBM WebSphere Portal跨站脚本漏洞，请尽快自查</li>
          <li>跨站脚本漏洞，请尽快自查</li>
          <li>发现CNVD-2018-01031IBM WebSphere Portal跨站脚本漏洞，请尽快自查</li>
      </ul>
  </div>

滚屏div的class样式：
需要注意的是overflow:hidden跟height的值一定要设定。不然不会滚屏。

.scroll-message-style {
    overflow:hidden;
    height:30px;
    float:right;
    padding-right:5%;
}

接下是js相关的代码了：
这段定时器代码可以当独放在一个方法中执行。每次都是获取dom上的ID，这样也有个好处是在执行期间dom节点不会一直累加。

setTimeout(function(){
      var table = document.getElementById("scroll-message");
       var timer = null;
       table.scrollTop = 0;
       table.innerHTML += table.innerHTML;
       function play() {
           clearInterval(timer);
           timer = setInterval(function() {
               table.scrollTop++;
               if (table.scrollTop >= table.scrollHeight / 2) {
                   table.scrollTop = 0;
               }
           }, 100);
       }
       setTimeout(play, 500);
       table.onmouseover = function() {
           clearInterval(timer)
       };
       table.onmouseout = play;
   },0)

效果图：

下面是table相关的html代码，js代码跟上面一样的，只不过获取的dom元素ID改下就好，table头部相关的代码内容就不贴了。

<div class="scroll-panel">
<div class="table" id="scroll-table" style="top:0;">
           <table cellspacing="0" cellpadding="0" id="alarmtable">
               <tbody>
                   <tr v-for="item in list">
                       <td width="25%" :id="item.ASSET_ID">{{item.creationTime}}</td>
                       <td width="25%" :id="item.ASSET_ID">{{item.srcIp}}({{item.srcIpPlace}})</td>
                       <td width="25%" :id="item.ASSET_ID">{{item.dstIp}}({{item.dstIpPlace}})</td>
                       <td width="15%" :id="item.ASSET_ID">{{item.flowType}}</td>
                       <td width="10%" :id="item.ASSET_ID">{{item.severityLevel|toAttackLevel}}</td>
                   </tr>
               </tbody>
           </table>
       </div>
   </div>

补充修改地方：2019年6月3日
对table.innerHTML += table.innerHTML增加判断，防止内容少于三条时而高度总行数的高度没有超出tbody高度时被复制一遍，导致看去数据重复且不滚动问题。这里row条数大于3是 根据自己定义table的高度来设定的。
另外document.body.onclick方法是是否需要点击行进行操作需要的，而这边是根据对应绑定的id值来区分。如果有需要点击行操作就加上。用这种点击方式的原因是innerHTML操作并不会更新js函数方法的绑定，导致点击事件不触发。所以从body层判断点击事件触发的地方。
绑定的id值是number型的但在id上是默认为string，所以要转回number。绑number的想法一是传参需要，二是一般定义id都不会用number型去定义，防止跟页面其他地方定义的冲突。

let that = this;
      setTimeout(function() {
         var table = document.getElementById("scroll-table");
        if(document.getElementById("alarmtable").rows.length>3){
              table.innerHTML += table.innerHTML;
          }
          document.body.onclick=function(e){
            var e=e||event;
            var current=e.target||e.srcElement
           
            var ids = current.id;
            //  console.log("currentId",ids,parseInt(ids) && typeof(parseInt(ids))=="number");
              if(parseInt(ids) && typeof(parseInt(ids))=="number"){
                  that.open(ids);
              }
            } 
        var timer = null;
        table.scrollTop = 0;
        function play() {
          clearInterval(timer);
          timer = setInterval(function() {
            table.scrollTop++;
            // console.log("table.scrollTop="+table.scrollTop,"table.scrollHeight/2="+(table.scrollHeight/2));
            if (table.scrollTop >= table.scrollHeight / 3) {
              table.scrollTop = 0;
            }
          }, 50);
        }
        setTimeout(play, 500);
        table.onmouseover = function() {
          clearInterval(timer);
        };
        table.onmouseout = play;
      }, 0);

css样式代码：

/*表格*/
        .scroll-panel .table{
            width: 100%;
            background-color: rgba(21, 27, 99, 0.21);
            position: absolute;
            margin: auto;
            top: 50px;
            left:0;
            right:0;
            bottom: 0;
        }
        .scroll-panel{
           position:relative;
           width:100%;
           height:100%;
           margin:auto;
           overflow:hidden;
        }
        .table{
            width:100%;
            height:auto;
            overflow: hidden;
        }