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

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

转载：https://blog.csdn.net/u012138137/article/details/80729789

<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 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">
<tbody>
<tr v-for="item in list">
<td width="25%">{{item.creationTime}}</td>
<td width="25%">{{item.srcIp}}({{item.srcIpPlace}})</td>
<td width="25%">{{item.dstIp}}({{item.dstIpPlace}})</td>
<td width="15%">{{item.flowType}}</td>
<td width="10%">{{item.severityLevel|toAttackLevel}}</td>
</tr>
</tbody>
</table>
</div>
</div>

/*表格*/
.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;
}