html表格向上,实现table上下滚动

实现table上下无缝滚动

table表格无缝向上滚动

.tablebox {

height: 200px;

overflow: hidden;

position: relative;

width: 300px;

margin: 100px auto;

background-color: rgba(6,26,103,1);

}

.tbl-header {

width: 100%;

position: absolute;

top: 0;

left: 0;

z-index: 999;

}

.tbl-body {

width: 100%;

position: absolute;

top: 0;

left: 0;

}

.tablebox table {

width: 100%;

}

.tablebox table th,

.tablebox table td {

font-size: 12px;

color: #7ca6f4;

line-height: 26px;

text-align: center;

}

.tablebox table tr th {

background: #022852;

cursor: pointer;

}

.tablebox table tr td {

border-bottom: 1px solid #202e64;

}

tr td img{

width: 25px;

margin-top: 5px;

}

tr td p{

width: 60px;

height: 20px;

font-weight: bold;

border-radius: 5px;

margin: auto;

text-align: center;

line-height: 20px;

color: #000000;

}

.cf1{

background: #c20000;

}

.cf2{

background: #ee880c;

}

.cf3{

background: #f8f400;

}

头像姓名处分时间处分原因处分类型

头像姓名处分时间处分原因处分类型

张飞2020.8.30打架斗殴

开除学籍

张飞2020.8.30打架斗殴

留校查看

张飞2020.8.30打架斗殴

开除学籍

张飞2020.8.30打架斗殴

开除学籍

张飞2020.8.30打架斗殴

留校查看

张飞2020.8.30打架斗殴

开除学籍

var MyMarhq = '';

clearInterval(MyMarhq);

var item = $('.tbl-body tbody tr').length

console.log(item)

if(item> 4){

$('.tbl-body tbody').html($('.tbl-body tbody').html()+$('.tbl-body tbody').html());

$('.tbl-body').css('top', '0');

var tblTop = 0;

var speedhq = 50; // 数值越大越慢

var outerHeight = $('.tbl-body tbody').find("tr").outerHeight();

function Marqueehq(){

if(tblTop <= -outerHeight*item){

tblTop = 0;

} else {

tblTop -= 1;

}

$('.tbl-body').css('top', tblTop+'px');

}

MyMarhq = setInterval(Marqueehq,speedhq);

// 鼠标移上去取消事件

$(".tbl-body tbody").hover(function (){

clearInterval(MyMarhq);

},function (){

clearInterval(MyMarhq);

MyMarhq = setInterval(Marqueehq,speedhq);

})

}