-------------------------------
三年前的copy来的代码
当时使用没问题
现在使用高版本jquery 却出现了问题
把 $sb.attr("scrollHeight")
改成了 $sb[0].scrollHeight
又可以用了
--------------------------------
<html> <head> <title>Untitled</title> <script type="text/javascript" src="http://localhost:8080/oa/resources/plug/jquery/1.11.2/jquery-1.11.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',width:'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); debugger; var nNewIndex = Math.floor($sb.scrollTop() / $sb[0].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="5"> <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>111</td><td>111</td><td>111</td><td>111</td><td>111</td><td>111</td></tr> <tr><td>111</td><td>111</td><td>111</td><td>111</td><td>111</td><td>111</td></tr> <tr><td>111</td><td>111</td><td>111</td><td>111</td><td>111</td><td>111</td></tr> <tr><td>111</td><td>111</td><td>111</td><td>111</td><td>111</td><td>111</td></tr> <tr><td>111</td><td>111</td><td>111</td><td>111</td><td>111</td><td>111</td></tr> <tr><td>111</td><td>111</td><td>111</td><td>111</td><td>111</td><td>111</td></tr> <tr><td>111</td><td>111</td><td>111</td><td>111</td><td>111</td><td>111</td></tr> <tr><td>111</td><td>111</td><td>111</td><td>111</td><td>111</td><td>111</td></tr> <tr><td>111</td><td>111</td><td>111</td><td>111</td><td>111</td><td>111</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>