<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap 101 Template</title>
<link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css">
<style type="text/css">
.content {
width: 500px;
margin: 50px 50px;
}
.header {
line-height: 50px;
background-color: #ECECEC;
}
.data {
height: 300px;
overflow: hidden;
}
</style>
</head>
<body>
<div class="content">
<div class="header row">
<div class="col-md-3">姓名</div>
<div class="col-md-3">性别</div>
<div class="col-md-3">年龄</div>
<div class="col-md-3">职业</div>
</div>
<div class="data">
<div class="data-content">
<table class="table table-hover">
</table>
</div>
<div class="data-footer"></div>
</div></div><script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js">
</script><script src="http://cdn.bootcss.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script type="text/javascript">
var html = \'\';
for(var i = 0; i < 15; i++) {
html += \'<tr>\';
html += \'<td>张三\' + i + \'</td>\';
if(i % 2 == 0) {
html += \'<td>男</td>\';
} else {
html += \'<td>女</td>\';
}
html += \'<td>\' + (10 + i) + \'</td>\';
html += \'<td>程序员</td>\';
html += \'</tr>\';
}
$(\'.table\').html(html);
$(\'td\').addClass(\'col-md-3\');
var dataDOM = $(\'.data\')[0];
var dataContentDOM = $(\'.data-content\')[0];
var dataFooterDOM = $(\'.data-footer\')[0];
var height = dataDOM.offsetTop + dataDOM.offsetHeight;
setInterval(function() {
if(dataFooterDOM.offsetTop - dataDOM.scrollTop - height <= 0) {
dataDOM.scrollTop -= dataContentDOM.offsetHeight;
} else {
dataDOM.scrollTop++;
}
},
20);
</script>
</body>
</html>