方法一:
html代码
<div style="margin:10px 10px;width:306px;height:215px;">
<table style="width:100%;height:215px;">
<thead style="background: rgba(0,0,0,0.3);height:40px;">
<tr
style="font-size: 14px;font-family: PingFangSC-Medium, PingFang SC;font-weight: 500;color: #FFFFFF;">
<th style="width:96px;">姓名</th>
<th style="width:96px;">班级</th>
<th style="width:96px;">学号</th>
</tr>
</thead>
<tbody
style="background: rgba(0,0,0,0.05);height: 175px;position: absolute;overflow: hidden;">
<tr>
<td style="width:96px;">112</td>
<td style="width:96px;">01</td>
<td style="width:96px;">01423</td>
</tr>
<tr>
<td style="width:96px;">张三</td>
<td style="width:96px;">2班</td>
<td style="width:96px;">2000520</td>
</tr>
<tr>
<td style="width:96px;">张大呀</td>
<td style="width:96px;">3班</td>
<td style="width:96px;">2000220</td>
</tr>
<tr>
<td style="width:96px;">旺物流</td>
<td style="width:96px;">1班</td>
<td style="width:96px;">20001220</td>
</tr>
<tr>
<td style="width:96px;">李四</td>
<td style="width:96px;">6班</td>
<td style="width:96px;">20002320</td>
</tr>
<tr>
<td style="width:96px;">张小三</td>
<td style="width:96px;">12班</td>
<td style="width:96px;">20005123</td>
</tr>
</tbody>
</table>
<div>
</div>
</div>
javascript 代码
var scrollHeight = $('tbody')[0].scrollHeight - $('tbody').innerHeight()
$(function () {
if (scrollHeight > 0) {
interval = setInterval(MoveScroll, 50)
}
})
$('tbody').hover(function () {
if (scrollHeight > 0) {
clearInterval(interval)
}
}, function () {
if (scrollHeight > 0) {
clearInterval(interval)
interval = setInterval(MoveScroll, 50)
}
})
function MoveScroll() {
var scroll = $('tbody').scrollTop()
if (scroll >= scrollHeight) {
scroll = 0;
} else {
scroll++
}
$('tbody').scrollTop(scroll)
}
css代码
tr td {
text-align: center;
height: 36px;
}
方法2 -等待后续更新