<html>
<head>
<meta charset="UTF-8">
<style>
div {
width: 736px;
overflow: hidden
}
table {
width: 756px;
}
thead tr {
display: block;
}
tbody {
display: block;
height: 100px;
overflow: auto;
}
thead th {
width: 200px;
text-align: center;
}
tbody td {
width: 200px;
text-align: center;
}
</style>
<script src="js/jquery.min.js"></script>
</head>
<body>
<div>
<table>
<thead>
<tr>
<th>Header 1</th>
<th>Header 2</th>
<th>Header 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>Cell Content 1</td>
<td>Cell Content 2</td>
<td>Cell Content 3</td>
</tr>
<tr>
<td>Cell Content 1</td>
<td>Cell Content 2</td>
<td>Cell Content 3</td>
</tr>
<tr>
<td>Cell Content 1</td>
<td>Cell Content 2</td>
<td>Cell Content 3</td>
</tr>
<tr>
<td>Cell Content 1</td>
<td>Cell Content 2</td>
<td>Cell Content 3</td>
</tr>
<tr>
<td>Cell Content 1</td>
<td>Cell Content 2</td>
<td>Cell Content 3</td>
</tr>
<tr>
<td>Cell Content 1</td>
<td>Cell Content 2</td>
<td>Cell Content 3</td>
</tr>
<tr>
<td>Cell Content 1</td>
<td>Cell Content 2</td>
<td>Cell Content 3</td>
</tr>
<tr>
<td>Cell Content 1</td>
<td>Cell Content 2</td>
<td>Cell Content 3</td>
</tr>
</tbody>
</table>
</div>
<script>//滚动条到底时的高度,等于0时说明没有滚动条
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)
}
</script>
</body>
</html>
