前段时间因公司需要，需要实现一个Repeater下的锁定行、列滚动效果 ，网上找了一些实现的滚动效果的代码，测试下来发现网页的刷新速度降低了好多，当数据比较大（30列，300行时）页面还一度出现假死状态。用户体验效果太差。
然后就决定自己写一下方法，看一下，能否实现效果，经过多次测试终于完成了此功能。
代码主要用到DIV+CSS，利用DIV的多层重叠效果实现。
DIV “DivMain” 实现滚动条效果，绑定 onScroll事件
DIV "DivDataTable" 所有数据展示，需要的数据全部读取到此DIV内，Repeater也在此DIV内
DIV "div_Top" 使用代码Clone 主DIV内的Repeater标题行，用于实现上下滚动时，列自动向下移动，需要锁住几行就Clone几行
DIV "divLeft" 使用代码Clone 主DIV内Repeater的列，需要锁住几列就Clone几列
Div “divLeftTitle” 使用代码Clone "divLeft" DIV内的标题行，用于滚动条上下 、左右交叉移动时，显示被锁住的列标题（即 "divLeft"的标题行）
预设各部分对应的CSS，然后由JS代码在onScroll事件内控制各DIV部分变动
我目前只做到了IE10、IE11效果调试，其它浏览器与IE版本需要单独调配CSS样式，这个就请各位自己完成了。哈，
PS： 本人JS、CSS都比较菜
代码如下（因为无法贴原代码，以下代码是我简化后的效果）：
<html>
<head>
<script language="javascript" type="text/javascript">
var DivMainLeft = 0;
var DivMainTop = 0;
function testScroll() {
var TOP = document.getElementById("div_Top");
DivMainTop = document.getElementById('DivMain').scrollTop;
TOP.style.top = DivMainTop + "px";
var LEFT = document.getElementById("divLeft");
var CurrentDivMainLeft = document.getElementById('DivMain').scrollLeft
if (DivMainLeft != CurrentDivMainLeft) {
LEFT.style.left = CurrentDivMainLeft + "px";
DivMainLeft = CurrentDivMainLeft;
}
if ((DivMainLeft != 0 && DivMainTop != 0) || DivMainTop>0) {
var DivLeftTitle = document.getElementById("divLeftTitle");
DivLeftTitle.style.display = "block";
DivLeftTitle.style.zIndex = "1000";
DivLeftTitle.style.top = TOP.style.top;
DivLeftTitle.style.left = LEFT.style.left;
}
if (DivMainTop == 0) {
document.getElementById("divLeftTitle").style.display = "none";
}
var browser = navigator.userAgent;
var version = browser.split(";");
var trim_Version = version[3].replace(/[ ]/g, "");
if (trim_Version == "Trident/6.0") {
if (document.getElementById('DivMain').scrollTop == 0) {
LEFT.style.top = "1px";
var Tb_Left = document.getElementById("tb_SheBianDetail_LEFT");
var TB_Tr = Tb_Left.getElementsByTagName("tr");
TB_Tr[0].style.height = "30px";
for (i = 1; i < TB_Tr.length; i++) {
TB_Tr[i].style.height = "40px";
}
}
else {
LEFT.style.top = "8px"; //此处，需要是运行的Win7 的IIS，是8PX，如果是Win2008的IIS，是0px
var Tb_Left = document.getElementById("tb_SheBianDetail_LEFT");
var TB_Tr = Tb_Left.getElementsByTagName("tr");
TB_Tr[0].style.height = "30px";
for (i = 1; i < TB_Tr.length; i++) {
TB_Tr[i].style.height = "42px"; //此处如果是运行在Win7 的IIS，是42PX，如果是Win2008的IIS是41PX
}
}
}
else {
LEFT.style.top = "0px";
}
}
</script>
<title>表格锁定行、列</title></head>
<style type="text/css">
#tb_SheBianDetail td , #tb_SheBianDetail_Top td , #tb_SheBianDetail_LEFT td,tb_SheBianDetail_LEFT_Title td
{
border:1px solid gray;
padding:0px;
border-spacing:0px;
text-align:center;
border-collapse:collapse;
}
#tb_SheBianDetail tr , #tb_SheBianDetail_Top tr , #tb_SheBianDetail_LEFT tr,tb_SheBianDetail_LEFT_Title tr
{
height:40px;
}
.SheBianDetail_Materal_Info
{
width:100px;
}
.SheBianDetail_RowNo
{
width:60px;
}
</style>
<body >
<div>
<div class="PageInputObjectBorder" id="DivMain" style="overflow:scroll; position:relative;width:500px; height:200px;" onscroll="testScroll()">
<div class="PageInputObjectBorder" id="DivDataTable" style="position:absolute;">
<table id="tb_SheBianDetail" style="width:3100px; border-collapse:collapse;">
<tr style="background-color:Blue;">
<td class="SheBianDetail_RowNo ">NO</td>
<td class="SheBianDetail_Materal_Info ">列1</td>
<td class="SheBianDetail_Materal_Info ">列2</td>
<td class="SheBianDetail_Materal_Info ">列3</td>
<td class="SheBianDetail_Materal_Info ">列4</td>
<td class="SheBianDetail_Materal_Info ">列5</td>
<td class="SheBianDetail_Materal_Info ">列6</td>
<td class="SheBianDetail_Materal_Info ">列7</td>
<td class="SheBianDetail_Materal_Info ">列8</td>
</tr>
<tr style="background-color:#ddf0ed;">
<td class="SheBianDetail_RowNo "></td>
<td class="SheBianDetail_Materal_Info "></td>
<td class="SheBianDetail_Materal_Info "></td>
<td class="SheBianDetail_Materal_Info "></td>
<td class="SheBianDetail_Materal_Info "></td>
<td class="SheBianDetail_Materal_Info "></td>
<td class="SheBianDetail_Materal_Info "></td>
<td class="SheBianDetail_Materal_Info "></td>
<td class="SheBianDetail_Materal_Info "></td>
<td class="SheBianDetail_Materal_Info "></td>
<td class="SheBianDetail_Materal_Info "></td>
<td class="SheBianDetail_Materal_Info "></td>
<td class="SheBianDetail_Materal_Info "></td>
<td class="SheBianDetail_Materal_Info "></td>
<td class="SheBianDetail_Materal_Info "></td>
</tr>
<tr style="background-color:#eee8ab;">
<td class="SheBianDetail_RowNo "></td>
<td class="SheBianDetail_Materal_Info "></td>
<td class="SheBianDetail_Materal_Info "></td>
<td class="SheBianDetail_Materal_Info "></td>
<td class="SheBianDetail_Materal_Info "></td>
<td class="SheBianDetail_Materal_Info "></td>
<td class="SheBianDetail_Materal_Info "></td>
<td class="SheBianDetail_Materal_Info "></td>
<td class="SheBianDetail_Materal_Info "></td>
<td class="SheBianDetail_Materal_Info "></td>
<td class="SheBianDetail_Materal_Info "></td>
<td class="SheBianDetail_Materal_Info "></td>
<td class="SheBianDetail_Materal_Info "></td>
<td class="SheBianDetail_Materal_Info "></td>
<td class="SheBianDetail_Materal_Info "></td>
</tr>
<tr style="background-color:#ddf0ed;">
<td class="SheBianDetail_RowNo "></td>
<td class="SheBianDetail_Materal_Info "></td>
<td class="SheBianDetail_Materal_Info "></td>
<td class="SheBianDetail_Materal_Info "></td>
<td class="SheBianDetail_Materal_Info "></td>
<td class="SheBianDetail_Materal_Info "></td>
<td class="SheBianDetail_Materal_Info "></td>
<td class="SheBianDetail_Materal_Info "></td>
<td class="SheBianDetail_Materal_Info "></td>
<td class="SheBianDetail_Materal_Info "></td>
<td class="SheBianDetail_Materal_Info "></td>
<td class="SheBianDetail_Materal_Info "></td>
<td class="SheBianDetail_Materal_Info "></td>
<td class="SheBianDetail_Materal_Info "></td>
<td class="SheBianDetail_Materal_Info "></td>
</tr>
<tr style="background-color:#eee8ab;">
<td class="SheBianDetail_RowNo "></td>
<td class="SheBianDetail_Materal_Info "></td>
<td class="SheBianDetail_Materal_Info "></td>
<td class="SheBianDetail_Materal_Info "></td>
<td class="SheBianDetail_Materal_Info "></td>
<td class="SheBianDetail_Materal_Info "></td>
<td class="SheBianDetail_Materal_Info "></td>
<td class="SheBianDetail_Materal_Info "></td>
<td class="SheBianDetail_Materal_Info "></td>
<td class="SheBianDetail_Materal_Info "></td>
<td class="SheBianDetail_Materal_Info "></td>
<td class="SheBianDetail_Materal_Info "></td>
<td class="SheBianDetail_Materal_Info "></td>
<td class="SheBianDetail_Materal_Info "></td>
<td class="SheBianDetail_Materal_Info "></td>
</tr>
<tr style="background-color:#ddf0ed;">
<td class="SheBianDetail_RowNo "></td>
<td class="SheBianDetail_Materal_Info "></td>
<td class="SheBianDetail_Materal_Info "></td>
<td class="SheBianDetail_Materal_Info "></td>
<td class="SheBianDetail_Materal_Info "></td>
<td class="SheBianDetail_Materal_Info "></td>
<td class="SheBianDetail_Materal_Info "></td>
<td class="SheBianDetail_Materal_Info "></td>
<td class="SheBianDetail_Materal_Info "></td>
<td class="SheBianDetail_Materal_Info "></td>
<td class="SheBianDetail_Materal_Info "></td>
<td class="SheBianDetail_Materal_Info "></td>
<td class="SheBianDetail_Materal_Info "></td>
<td class="SheBianDetail_Materal_Info "></td>
<td class="SheBianDetail_Materal_Info "></td>
</tr>
<tr style="background-color:#eee8ab;">
<td class="SheBianDetail_RowNo "></td>
<td class="SheBianDetail_Materal_Info "></td>
<td class="SheBianDetail_Materal_Info "></td>
<td class="SheBianDetail_Materal_Info "></td>
<td class="SheBianDetail_Materal_Info "></td>
<td class="SheBianDetail_Materal_Info "></td>
<td class="SheBianDetail_Materal_Info "></td>
<td class="SheBianDetail_Materal_Info "></td>
<td class="SheBianDetail_Materal_Info "></td>
<td class="SheBianDetail_Materal_Info "></td>
<td class="SheBianDetail_Materal_Info "></td>
<td class="SheBianDetail_Materal_Info "></td>
<td class="SheBianDetail_Materal_Info "></td>
<td class="SheBianDetail_Materal_Info "></td>
<td class="SheBianDetail_Materal_Info "></td>
</tr>
<tr style="background-color:#ddf0ed;">
<td class="SheBianDetail_RowNo "></td>
<td class="SheBianDetail_Materal_Info "></td>
<td class="SheBianDetail_Materal_Info "></td>
<td class="SheBianDetail_Materal_Info "></td>
<td class="SheBianDetail_Materal_Info "></td>
<td class="SheBianDetail_Materal_Info "></td>
<td class="SheBianDetail_Materal_Info "></td>
<td class="SheBianDetail_Materal_Info "></td>
<td class="SheBianDetail_Materal_Info "></td>
<td class="SheBianDetail_Materal_Info "></td>
<td class="SheBianDetail_Materal_Info "></td>
<td class="SheBianDetail_Materal_Info "></td>
<td class="SheBianDetail_Materal_Info "></td>
<td class="SheBianDetail_Materal_Info "></td>
<td class="SheBianDetail_Materal_Info "></td>
</tr>
</table>
</div>
<div id="div_Top" style="position:relative;top:0px; z-index:100;">
<table id="tb_SheBianDetail_Top" style="width:3100px; border-collapse:collapse; background-color:blue;">
<tr>
<td class="SheBianDetail_RowNo ">NO</td>
<td class="SheBianDetail_Materal_Info ">列1</td>
<td class="SheBianDetail_Materal_Info ">列2</td>
<td class="SheBianDetail_Materal_Info ">列3</td>
<td class="SheBianDetail_Materal_Info ">列4</td>
<td class="SheBianDetail_Materal_Info ">列5</td>
<td class="SheBianDetail_Materal_Info ">列6</td>
<td class="SheBianDetail_Materal_Info ">列7</td>
<td class="SheBianDetail_Materal_Info ">列8</td>
</tr>
</table>
</div>
<div id="divLeft" style="position:absolute;top:0px;width:200px; float:left; z-index:200; left:0px;border:1px solid red; text-align:left">
<table id="tb_SheBianDetail_LEFT" style="border-collapse:collapse;">
<tr style="background-color:green;">
<td class="SheBianDetail_RowNo ">NO</td>
<td class="SheBianDetail_Materal_Info ">列1</td>
<td class="SheBianDetail_Materal_Info ">列2</td>
</tr>
<tr style="background-color:#ddf0ed;">
<td class="SheBianDetail_RowNo "></td>
<td class="SheBianDetail_Materal_Info "></td>
<td class="SheBianDetail_Materal_Info "></td>
</tr>
<tr style="background-color:#eee8ab;">
<td class="SheBianDetail_RowNo "></td>
<td class="SheBianDetail_Materal_Info "></td>
<td class="SheBianDetail_Materal_Info "></td>
</tr>
<tr style="background-color:#ddf0ed;">
<td class="SheBianDetail_RowNo "></td>
<td class="SheBianDetail_Materal_Info "></td>
<td class="SheBianDetail_Materal_Info "></td>
</tr>
<tr style="background-color:#eee8ab;">
<td class="SheBianDetail_RowNo "></td>
<td class="SheBianDetail_Materal_Info "></td>
<td class="SheBianDetail_Materal_Info "></td>
</tr>
<tr style="background-color:#ddf0ed;">
<td class="SheBianDetail_RowNo "></td>
<td class="SheBianDetail_Materal_Info "></td>
<td class="SheBianDetail_Materal_Info "></td>
</tr>
<tr style="background-color:#eee8ab;">
<td class="SheBianDetail_RowNo "></td>
<td class="SheBianDetail_Materal_Info "></td>
<td class="SheBianDetail_Materal_Info "></td>
</tr>
<tr style="background-color:#ddf0ed;">
<td class="SheBianDetail_RowNo "></td>
<td class="SheBianDetail_Materal_Info "></td>
<td class="SheBianDetail_Materal_Info "></td>
</tr>
</table>
</div>
<div id="divLeftTitle" style="position:absolute;top:0px;width:200px; float:left; z-index:1000; left:0px;border:1px solid #9FEE00; text-align:left; display:none;">
<table id="tb_SheBianDetail_LEFT_Title" style="border-collapse:collapse; background-color:gray;">
<tr height="40px">
<td class="SheBianDetail_RowNo ">NO</td>
<td class="SheBianDetail_Materal_Info ">列1</td>
<td class="SheBianDetail_Materal_Info ">列2</td>
</tr>
</table>
</div>
</div>
</div>
</form>
</body>
</html>