在表格中，不需要分页但需要滚动TBody的场合蛮多的，以前做过一个通过两个表格来实现：用JQuery实现Fix表头表格 ，今天突然想到，可以单独做一个滚动条，让滚动条的位置变化时，只显示TBody中指定范围的TR来实现滚动，便有了下面的实现，可以在IE/FF下运行，在滚动条上滚动鼠标轮时可以实现TBody滚动。这是一个思路，希望能抛砖引玉。
先看下效果图：
代码实现：（马上就不能上网了，注释可以没有呀）
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Untitled</title>
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript">
$(function(){
var table = $('table.scrolltable').each(function(){
var $table = $(this).css('border-collapse','collapse');
var $tbody = $table.find('tbody').eq(0);
var sbPosition = {left: $tbody.position().left + $tbody.outerWidth(), top: $tbody.position().top };
var $scrollbar = $('<div class="scrollbar"/>').css({'position':'absolute', 'overflow-y':'auto',left:sbPosition.left, top:sbPosition.top, height:'0px','20px'})
.append($('<div/>'))
.appendTo($table.parent());
$table.bind('rownum',function(event, newRowNum){
//先设置显示的行
var nFirst = parseInt($tbody.attr('itemIndex') || '0');
$tbody.find('tr').hide();
$tbody.find('tr').each(function(i){
if( i >= nFirst && i < nFirst + newRowNum)
{
$(this).show();
}
else
{
$(this).hide();
}
});
var scrollHeight = $tbody.find('tr').length * $tbody.height() / newRowNum;
var $sb = $scrollbar;
$sb.css('height',$tbody.height());
$sb.find('div').eq(0).css('height',scrollHeight);
});
$scrollbar.scroll(function(){
$sb = $(this);
var nNewIndex = Math.floor($sb.scrollTop() / $sb.attr('scrollHeight') * $tbody.find('tr').length);
var nIndex = parseInt($tbody.attr('itemIndex') || '0');
var rownum = parseInt($table.attr('rownum') || '10');
if(nIndex != nNewIndex)
{
$tbody.find('tr').each(function(i){
if(i >= nNewIndex && i < nNewIndex + rownum)
{
$(this).show();
}
else
{
$(this).hide();
}
});
$tbody.attr('itemIndex', nNewIndex);
}
});
$table.trigger('rownum',parseInt($table.attr('rownum')));
});
});
</script>
<style type="text/css">
.scrollbar
{
border:solid 1px red;
}
.scrolltable
{
}
</style>
</head>
<body>
<table class="scrolltable" border="1" rownum="10">
<thead>
<tr>
<th>aaa</th>
<th>bbb</th>
<th>ccc</th>
<th>ddd</th>
<th>eee</th>
<th>fff</th>
</tr>
</thead>
<tbody>
<tr>
<td>111</td>
<td>111</td>
<td>111</td>
<td>111</td>
<td>111</td>
<td>111</td>
</tr>
<tr>
<td>222</td>
<td>222</td>
<td>222</td>
<td>222</td>
<td>222</td>
<td>222</td>
</tr>
<tr>
<td>333</td>
<td>333</td>
<td>333</td>
<td>333</td>
<td>333</td>
<td>333</td>
</tr>
<tr>
<td>444</td>
<td>444</td>
<td>444</td>
<td>444</td>
<td>444</td>
<td>444</td>
</tr>
<tr>
<td>555</td>
<td>555</td>
<td>555</td>
<td>555</td>
<td>555</td>
<td>555</td>
</tr>
<tr>
<td>444</td>
<td>444</td>
<td>444</td>
<td>444</td>
<td>444</td>
<td>444</td>
</tr>
<tr>
<td>111</td>
<td>111</td>
<td>111</td>
<td>111</td>
<td>111</td>
<td>111</td>
</tr>
<tr>
<td>222</td>
<td>222</td>
<td>222</td>
<td>222</td>
<td>222</td>
<td>222</td>
</tr>
<tr>
<td>333</td>
<td>333</td>
<td>333</td>
<td>333</td>
<td>333</td>
<td>333</td>
</tr>
<tr>
<td>444</td>
<td>444</td>
<td>444</td>
<td>444</td>
<td>444</td>
<td>444</td>
</tr>
<tr>
<td>555</td>
<td>555</td>
<td>555</td>
<td>555</td>
<td>555</td>
<td>555</td>
</tr>
<tr>
<td>444</td>
<td>444</td>
<td>444</td>
<td>444</td>
<td>444</td>
<td>444</td>
</tr>
<tr>
<td>111</td>
<td>111</td>
<td>111</td>
<td>111</td>
<td>111</td>
<td>111</td>
</tr>
<tr>
<td>222</td>
<td>222</td>
<td>222</td>
<td>222</td>
<td>222</td>
<td>222</td>
</tr>
<tr>
<td>333</td>
<td>333</td>
<td>333</td>
<td>333</td>
<td>333</td>
<td>333</td>
</tr>
<tr>
<td>444</td>
<td>444</td>
<td>444</td>
<td>444</td>
<td>444</td>
<td>444</td>
</tr>
<tr>
<td>555</td>
<td>555</td>
<td>555</td>
<td>555</td>
<td>555</td>
<td>555</td>
</tr>
<tr>
<td>444</td>
<td>444</td>
<td>444</td>
<td>444</td>
<td>444</td>
<td>444</td>
</tr>
<tr>
<td>111</td>
<td>111</td>
<td>111</td>
<td>111</td>
<td>111</td>
<td>111</td>
</tr>
<tr>
<td>222</td>
<td>222</td>
<td>222</td>
<td>222</td>
<td>222</td>
<td>222</td>
</tr>
<tr>
<td>333</td>
<td>333</td>
<td>333</td>
<td>333</td>
<td>333</td>
<td>333</td>
</tr>
<tr>
<td>444</td>
<td>444</td>
<td>444</td>
<td>444</td>
<td>444</td>
<td>444</td>
</tr>
<tr>
<td>555</td>
<td>555</td>
<td>555</td>
<td>555</td>
<td>555</td>
<td>555</td>
</tr>
<tr>
<td>444</td>
<td>444</td>
<td>444</td>
<td>444</td>
<td>444</td>
<td>END</td>
</tr> <tr>
<td>444</td>
<td>444</td>
<td>444</td>
<td>444</td>
<td>444</td>
<td>444</td>
</tr>
<tr>
<td>111</td>
<td>111</td>
<td>111</td>
<td>111</td>
<td>111</td>
<td>111</td>
</tr>
<tr>
<td>222</td>
<td>222</td>
<td>222</td>
<td>222</td>
<td>222</td>
<td>222</td>
</tr>
<tr>
<td>333</td>
<td>333</td>
<td>333</td>
<td>333</td>
<td>333</td>
<td>333</td>
</tr>
<tr>
<td>444</td>
<td>444</td>
<td>444</td>
<td>444</td>
<td>444</td>
<td>444</td>
</tr>
<tr>
<td>555</td>
<td>555</td>
<td>555</td>
<td>555</td>
<td>555</td>
<td>555</td>
</tr>
<tr>
<td>444</td>
<td>444</td>
<td>444</td>
<td>444</td>
<td>444</td>
<td>END</td>
</tr> <tr>
<td>444</td>
<td>444</td>
<td>444</td>
<td>444</td>
<td>444</td>
<td>444</td>
</tr>
<tr>
<td>111</td>
<td>111</td>
<td>111</td>
<td>111</td>
<td>111</td>
<td>111</td>
</tr>
<tr>
<td>222</td>
<td>222</td>
<td>222</td>
<td>222</td>
<td>222</td>
<td>222</td>
</tr>
<tr>
<td>333</td>
<td>333</td>
<td>333</td>
<td>333</td>
<td>333</td>
<td>333</td>
</tr>
<tr>
<td>444</td>
<td>444</td>
<td>444</td>
<td>444</td>
<td>444</td>
<td>444</td>
</tr>
<tr>
<td>555</td>
<td>555</td>
<td>555</td>
<td>555</td>
<td>555</td>
<td>555</td>
</tr>
<tr>
<td>444</td>
<td>444</td>
<td>444</td>
<td>444</td>
<td>444</td>
<td>END</td>
</tr> <tr>
<td>444</td>
<td>444</td>
<td>444</td>
<td>444</td>
<td>444</td>
<td>444</td>
</tr>
<tr>
<td>111</td>
<td>111</td>
<td>111</td>
<td>111</td>
<td>111</td>
<td>111</td>
</tr>
<tr>
<td>222</td>
<td>222</td>
<td>222</td>
<td>222</td>
<td>222</td>
<td>222</td>
</tr>
<tr>
<td>333</td>
<td>333</td>
<td>333</td>
<td>333</td>
<td>333</td>
<td>333</td>
</tr>
<tr>
<td>444</td>
<td>444</td>
<td>444</td>
<td>444</td>
<td>444</td>
<td>444</td>
</tr>
<tr>
<td>555</td>
<td>555</td>
<td>555</td>
<td>555</td>
<td>555</td>
<td>555</td>
</tr>
<tr>
<td>444</td>
<td>444</td>
<td>444</td>
<td>444</td>
<td>444</td>
<td>END</td>
</tr> <tr>
<td>444</td>
<td>444</td>
<td>444</td>
<td>444</td>
<td>444</td>
<td>444</td>
</tr>
<tr>
<td>111</td>
<td>111</td>
<td>111</td>
<td>111</td>
<td>111</td>
<td>111</td>
</tr>
<tr>
<td>222</td>
<td>222</td>
<td>222</td>
<td>222</td>
<td>222</td>
<td>222</td>
</tr>
<tr>
<td>333</td>
<td>333</td>
<td>333</td>
<td>333</td>
<td>333</td>
<td>333</td>
</tr>
<tr>
<td>444</td>
<td>444</td>
<td>444</td>
<td>444</td>
<td>444</td>
<td>444</td>
</tr>
<tr>
<td>555</td>
<td>555</td>
<td>555</td>
<td>555</td>
<td>555</td>
<td>555</td>
</tr>
<tr>
<td>444</td>
<td>444</td>
<td>444</td>
<td>444</td>
<td>444</td>
<td>END</td>
</tr>
</tbody>
<tfoot>
<td>444</td>
<td>444</td>
<td>444</td>
<td>444</td>
<td>444</td>
<td>END</td>
</tfoot>
</table>
</body>
</html>
<html>
<head>
<title>Untitled</title>
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript">
$(function(){
var table = $('table.scrolltable').each(function(){
var $table = $(this).css('border-collapse','collapse');
var $tbody = $table.find('tbody').eq(0);
var sbPosition = {left: $tbody.position().left + $tbody.outerWidth(), top: $tbody.position().top };
var $scrollbar = $('<div class="scrollbar"/>').css({'position':'absolute', 'overflow-y':'auto',left:sbPosition.left, top:sbPosition.top, height:'0px','20px'})
.append($('<div/>'))
.appendTo($table.parent());
$table.bind('rownum',function(event, newRowNum){
//先设置显示的行
var nFirst = parseInt($tbody.attr('itemIndex') || '0');
$tbody.find('tr').hide();
$tbody.find('tr').each(function(i){
if( i >= nFirst && i < nFirst + newRowNum)
{
$(this).show();
}
else
{
$(this).hide();
}
});
var scrollHeight = $tbody.find('tr').length * $tbody.height() / newRowNum;
var $sb = $scrollbar;
$sb.css('height',$tbody.height());
$sb.find('div').eq(0).css('height',scrollHeight);
});
$scrollbar.scroll(function(){
$sb = $(this);
var nNewIndex = Math.floor($sb.scrollTop() / $sb.attr('scrollHeight') * $tbody.find('tr').length);
var nIndex = parseInt($tbody.attr('itemIndex') || '0');
var rownum = parseInt($table.attr('rownum') || '10');
if(nIndex != nNewIndex)
{
$tbody.find('tr').each(function(i){
if(i >= nNewIndex && i < nNewIndex + rownum)
{
$(this).show();
}
else
{
$(this).hide();
}
});
$tbody.attr('itemIndex', nNewIndex);
}
});
$table.trigger('rownum',parseInt($table.attr('rownum')));
});
});
</script>
<style type="text/css">
.scrollbar
{
border:solid 1px red;
}
.scrolltable
{
}
</style>
</head>
<body>
<table class="scrolltable" border="1" rownum="10">
<thead>
<tr>
<th>aaa</th>
<th>bbb</th>
<th>ccc</th>
<th>ddd</th>
<th>eee</th>
<th>fff</th>
</tr>
</thead>
<tbody>
<tr>
<td>111</td>
<td>111</td>
<td>111</td>
<td>111</td>
<td>111</td>
<td>111</td>
</tr>
<tr>
<td>222</td>
<td>222</td>
<td>222</td>
<td>222</td>
<td>222</td>
<td>222</td>
</tr>
<tr>
<td>333</td>
<td>333</td>
<td>333</td>
<td>333</td>
<td>333</td>
<td>333</td>
</tr>
<tr>
<td>444</td>
<td>444</td>
<td>444</td>
<td>444</td>
<td>444</td>
<td>444</td>
</tr>
<tr>
<td>555</td>
<td>555</td>
<td>555</td>
<td>555</td>
<td>555</td>
<td>555</td>
</tr>
<tr>
<td>444</td>
<td>444</td>
<td>444</td>
<td>444</td>
<td>444</td>
<td>444</td>
</tr>
<tr>
<td>111</td>
<td>111</td>
<td>111</td>
<td>111</td>
<td>111</td>
<td>111</td>
</tr>
<tr>
<td>222</td>
<td>222</td>
<td>222</td>
<td>222</td>
<td>222</td>
<td>222</td>
</tr>
<tr>
<td>333</td>
<td>333</td>
<td>333</td>
<td>333</td>
<td>333</td>
<td>333</td>
</tr>
<tr>
<td>444</td>
<td>444</td>
<td>444</td>
<td>444</td>
<td>444</td>
<td>444</td>
</tr>
<tr>
<td>555</td>
<td>555</td>
<td>555</td>
<td>555</td>
<td>555</td>
<td>555</td>
</tr>
<tr>
<td>444</td>
<td>444</td>
<td>444</td>
<td>444</td>
<td>444</td>
<td>444</td>
</tr>
<tr>
<td>111</td>
<td>111</td>
<td>111</td>
<td>111</td>
<td>111</td>
<td>111</td>
</tr>
<tr>
<td>222</td>
<td>222</td>
<td>222</td>
<td>222</td>
<td>222</td>
<td>222</td>
</tr>
<tr>
<td>333</td>
<td>333</td>
<td>333</td>
<td>333</td>
<td>333</td>
<td>333</td>
</tr>
<tr>
<td>444</td>
<td>444</td>
<td>444</td>
<td>444</td>
<td>444</td>
<td>444</td>
</tr>
<tr>
<td>555</td>
<td>555</td>
<td>555</td>
<td>555</td>
<td>555</td>
<td>555</td>
</tr>
<tr>
<td>444</td>
<td>444</td>
<td>444</td>
<td>444</td>
<td>444</td>
<td>444</td>
</tr>
<tr>
<td>111</td>
<td>111</td>
<td>111</td>
<td>111</td>
<td>111</td>
<td>111</td>
</tr>
<tr>
<td>222</td>
<td>222</td>
<td>222</td>
<td>222</td>
<td>222</td>
<td>222</td>
</tr>
<tr>
<td>333</td>
<td>333</td>
<td>333</td>
<td>333</td>
<td>333</td>
<td>333</td>
</tr>
<tr>
<td>444</td>
<td>444</td>
<td>444</td>
<td>444</td>
<td>444</td>
<td>444</td>
</tr>
<tr>
<td>555</td>
<td>555</td>
<td>555</td>
<td>555</td>
<td>555</td>
<td>555</td>
</tr>
<tr>
<td>444</td>
<td>444</td>
<td>444</td>
<td>444</td>
<td>444</td>
<td>END</td>
</tr> <tr>
<td>444</td>
<td>444</td>
<td>444</td>
<td>444</td>
<td>444</td>
<td>444</td>
</tr>
<tr>
<td>111</td>
<td>111</td>
<td>111</td>
<td>111</td>
<td>111</td>
<td>111</td>
</tr>
<tr>
<td>222</td>
<td>222</td>
<td>222</td>
<td>222</td>
<td>222</td>
<td>222</td>
</tr>
<tr>
<td>333</td>
<td>333</td>
<td>333</td>
<td>333</td>
<td>333</td>
<td>333</td>
</tr>
<tr>
<td>444</td>
<td>444</td>
<td>444</td>
<td>444</td>
<td>444</td>
<td>444</td>
</tr>
<tr>
<td>555</td>
<td>555</td>
<td>555</td>
<td>555</td>
<td>555</td>
<td>555</td>
</tr>
<tr>
<td>444</td>
<td>444</td>
<td>444</td>
<td>444</td>
<td>444</td>
<td>END</td>
</tr> <tr>
<td>444</td>
<td>444</td>
<td>444</td>
<td>444</td>
<td>444</td>
<td>444</td>
</tr>
<tr>
<td>111</td>
<td>111</td>
<td>111</td>
<td>111</td>
<td>111</td>
<td>111</td>
</tr>
<tr>
<td>222</td>
<td>222</td>
<td>222</td>
<td>222</td>
<td>222</td>
<td>222</td>
</tr>
<tr>
<td>333</td>
<td>333</td>
<td>333</td>
<td>333</td>
<td>333</td>
<td>333</td>
</tr>
<tr>
<td>444</td>
<td>444</td>
<td>444</td>
<td>444</td>
<td>444</td>
<td>444</td>
</tr>
<tr>
<td>555</td>
<td>555</td>
<td>555</td>
<td>555</td>
<td>555</td>
<td>555</td>
</tr>
<tr>
<td>444</td>
<td>444</td>
<td>444</td>
<td>444</td>
<td>444</td>
<td>END</td>
</tr> <tr>
<td>444</td>
<td>444</td>
<td>444</td>
<td>444</td>
<td>444</td>
<td>444</td>
</tr>
<tr>
<td>111</td>
<td>111</td>
<td>111</td>
<td>111</td>
<td>111</td>
<td>111</td>
</tr>
<tr>
<td>222</td>
<td>222</td>
<td>222</td>
<td>222</td>
<td>222</td>
<td>222</td>
</tr>
<tr>
<td>333</td>
<td>333</td>
<td>333</td>
<td>333</td>
<td>333</td>
<td>333</td>
</tr>
<tr>
<td>444</td>
<td>444</td>
<td>444</td>
<td>444</td>
<td>444</td>
<td>444</td>
</tr>
<tr>
<td>555</td>
<td>555</td>
<td>555</td>
<td>555</td>
<td>555</td>
<td>555</td>
</tr>
<tr>
<td>444</td>
<td>444</td>
<td>444</td>
<td>444</td>
<td>444</td>
<td>END</td>
</tr> <tr>
<td>444</td>
<td>444</td>
<td>444</td>
<td>444</td>
<td>444</td>
<td>444</td>
</tr>
<tr>
<td>111</td>
<td>111</td>
<td>111</td>
<td>111</td>
<td>111</td>
<td>111</td>
</tr>
<tr>
<td>222</td>
<td>222</td>
<td>222</td>
<td>222</td>
<td>222</td>
<td>222</td>
</tr>
<tr>
<td>333</td>
<td>333</td>
<td>333</td>
<td>333</td>
<td>333</td>
<td>333</td>
</tr>
<tr>
<td>444</td>
<td>444</td>
<td>444</td>
<td>444</td>
<td>444</td>
<td>444</td>
</tr>
<tr>
<td>555</td>
<td>555</td>
<td>555</td>
<td>555</td>
<td>555</td>
<td>555</td>
</tr>
<tr>
<td>444</td>
<td>444</td>
<td>444</td>
<td>444</td>
<td>444</td>
<td>END</td>
</tr>
</tbody>
<tfoot>
<td>444</td>
<td>444</td>
<td>444</td>
<td>444</td>
<td>444</td>
<td>END</td>
</tfoot>
</table>
</body>
</html>