实现列表内容向上滚动效果

类似上述的效果：

Paste_Image.png

上代码：

HTML：
<div class="wrp">
<div class="wrpBg"></div>
<div class="wrpTitle">
<p>
<span class="item1 item">状态</span>
<span class="item2 item">订单号</span>
<span class="item3 item">产品名称</span>
<span class="item4 item">数量</span>
<span class="item5 item">价格</span>
<span class="item6 item">日期</span>
</p>
</div>
<div class="scroll" id="scroll">
<div id="inner1">
<p>
<span class="item1 item">【订单】</span>
<span class="item2 item">12321321321</span>
<span class="item3 item">多撒多撒多撒多撒多撒多大大</span>
<span class="item4 item">1</span>
<span class="item5 item">32.26</span>
<span class="item6 item">2016-11-21</span>
</p>
</div>
</div>
</div>

</div>

注意： 直接遍历p元素就行了；

js：
function srcoll(){
var _scroll = document.getElementById("scroll"),
_inner1 = document.getElementById("inner1"),
speed = 20;
function marquee(){
if(_inner1.offsetHeight<=_scroll.scrollTop){
_scroll.scrollTop = 0
}else{
_scroll.scrollTop++;
}
}
var interval = setInterval(marquee,speed);
_scroll.onmouseover = function(){
clearInterval(interval);
}
_scroll.onmouseout = function(){
interval = setInterval(marquee,speed);
}
}
srcoll();

css：
.wrp {
position: absolute;
left: 20px;
bottom: 20px;
}
.wrp .wrpBg{
position: absolute;
/left: 20px;
bottom: 20px;/
height: 100%;
width: 100%;
background-color: #2B2F40;
opacity: .5;
}
.wrp .wrpTitle{
padding: 10px 0;
}
.wrp .wrpTitle span{
font-weight: bold;
}
.wrp .scroll{
line-height:20px;
/border:2px dashed #666;/
height:200px;
overflow:hidden;
}
.wrp .item{
padding: 5px 0;
text-align: center;
display: inline-block;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.wrp .item1{
width: 100px;
}
.wrp .item2{
width: 200px;
}
.wrp .item3{
width: 250px;
}
.wrp .item4{
width: 100px;
}
.wrp .item5{
width: 50px;
}
.wrp .item6{
width: 150px;
}