<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>