87,904
社区成员
发帖
与我相关
我的任务
分享
<style>
.cen {
background-color: #999;
}
.not-cen {
background-color: #fff;
}
</style>
<script>
var lineHeight;
var lines;
var beforCenLine;
var trs;
function aa(obj) {
var topLine = Math.floor(parseInt(obj.scrollTop) / lineHeight);
var cenLine = Math.floor(lines / 2) + topLine - 1;
//alert(document.getElementById('show-table').rows.length);
//显示中间
if(beforCenLine != null) {
trs[beforCenLine].className = 'not-center';
}
trs[cenLine].className = 'cen';
beforCenLine = cenLine;
}
onload = function(){
var obj = document.getElementById('get-line');
lineHeight = parseInt(obj.clientHeight);//得到一行的高度,用于下面的操作
lines = 200 / lineHeight; //div的显示高度除去单行高度,即为显示的行数。
trs = document.getElementById('show-table').rows; //行对象
trs[lines/2-1].className = 'cen';
beforCenLine = lines/2-1;
}
</script>
<div id='scroo-div' style="width:100%;height:200px;overflow:auto;" onscroll="aa(this)">
<table width="100%" id="show-table">
<tr><td id="get-line">1</td><td>2</td><td>3</td><td>4</td><td>5</td></tr>
<tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td></tr>
<tr><td>2</td><td>2</td><td>3</td><td>4</td><td>5</td></tr>
<tr><td>3</td><td>2</td><td>3</td><td>4</td><td>5</td></tr>
<tr><td>4</td><td>2</td><td>3</td><td>4</td><td>5</td></tr>
<tr><td>5</td><td>2</td><td>3</td><td>4</td><td>5</td></tr>
<tr><td>6</td><td>2</td><td>3</td><td>4</td><td>5</td></tr>
<tr><td>7</td><td>2</td><td>3</td><td>4</td><td>5</td></tr>
<tr><td>8</td><td>2</td><td>3</td><td>4</td><td>5</td></tr>
<tr><td>9</td><td>2</td><td>3</td><td>4</td><td>5</td></tr>
<tr><td>10</td><td>2</td><td>3</td><td>4</td><td>5</td></tr>
<tr><td>11</td><td>2</td><td>3</td><td>4</td><td>5</td></tr>
<tr><td>12</td><td>2</td><td>3</td><td>4</td><td>5</td></tr>
<tr><td>13</td><td>2</td><td>3</td><td>4</td><td>5</td></tr>
<tr><td>14</td><td>2</td><td>3</td><td>4</td><td>5</td></tr>
<tr><td>15</td><td>2</td><td>3</td><td>4</td><td>5</td></tr>
<tr><td>16</td><td>2</td><td>3</td><td>4</td><td>5</td></tr>
<tr><td>17</td><td>2</td><td>3</td><td>4</td><td>5</td></tr>
<tr><td>18</td><td>2</td><td>3</td><td>4</td><td>5</td></tr>
<tr><td>19</td><td>2</td><td>3</td><td>4</td><td>5</td></tr>
<tr><td>20</td><td>2</td><td>3</td><td>4</td><td>5</td></tr>
</table>
</div>