console
var container = document.getElementById('container');
var ul = document.getElementById('ul');
var timer = null;
function lunPo() {
if(!timer) {
var count = 0;
timer = setInterval(function() {
count -=1;
ul.style.top = count + 'px';
if(count <= -50) {
count = 0;
var flag;
flag = ul.children[0].cloneNode(true);
ul.removeChild(ul.children[0]);
ul.appendChild(flag)
}
},30)
}
}
lunPo();
<div class="container" id ="container">
<ul id="ul">
<li class="firstLi">1 刘军军在2020-06-22 10:35:00时间,在15采区,内的18505控制台超时</li>
<li>2 刘军军</li>
<li>3 刘军军在2020-06-22 10:35:00时间,在15采区,内的18505控制台超时</li>
<li>4 刘军军在2020-06-22 10:35:00时间,在15采区,内的18505控制台超时</li>
<li>5 刘军军在2020-06-22 10:35:00时间,在15采区,内的18505控制台超时</li>
<li>6 刘军军在2020-06-22 10:35:00时间,在15采区,内的18505控制台超时</li>
<li>7 刘军军在2020-06-22 10:35:00时间,在15采区,内的18505控制台超时</li>
<li>8 刘军军在2020-06-22 10:35:00时间,在15采区,内的18505控制台超时</li>
<li>9 刘军军在2020-06-22 10:35:00时间,在15采区,内的18505控制台超时</li>
<li>10 刘军军在2020-06-22 10:35:00时间,在15采区,内的18505控制台超时</li>
<li>11 刘军军在2020-06-22 10:35:00时间,在15采区,内的18505控制台超时</li>
</ul>
</div>
* {
margin: 0;
padding: 0;
}
.container {
width: 800px;
height: 50px;
border: 1px solid;
overflow-y: scroll;
overflow-x: hidden;
position: relative;
}
.container ul {
list-style: none;
position: absolute;
width: 100%;
top: 0;
text-align: center;
}
.container ul>li{
width: 100%;
height: 50px;
border: 1px solid;
line-height: 50px;
}
.container ul .firstLi{
--margin-top: 50px;
}