参考博客：https://blog.csdn.net/yubo_725/article/details/52839493 大佬是真的厉害，保存一下，以方便后续使用
效果：
源码：
<!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 { 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>