應用場景:一般是表頭和表體,或者是需要聯動的div,滾動一個div的滾動條,讓另一個div的滾動條也隨之滾動到一樣的位置
//表頭
<div id="sc-table-head-div" class="sc-table-head-div" style="position:absolute;">
<table id="conitor_head" style="table-layout:fixed;width:100%" cellpadding=0 cellspacing=0>
<colgroup>
<col style="width:24px;text-align:center"/>
<col style="width:24px;text-align:center"/>
</colgroup>
<tr>
<td>序<br/>號</td>
<td style="height:40px">姓名</td>
</tr>
</table>
</div>
//表體
<div id='sc-table-body-div' headid='sc-table-head-div' class='sc-table-body-div' οnscrοll='scroll(this)' style="overflow:auto">
<table id="conitor_body" style="table-layout:fixed;width:100%"
cellpadding=0 cellspacing=0>
<colgroup>
<col style="width:24px;text-align:center"/>
<col style="width:24px;text-align:center"/>
</colgroup>
<tr>
<td style="height:40px" colspan="1"></td>
<td style="height:40px" colspan="1"></td>
</tr>
</table>
</div>
現在需要我拖動表體的div橫向滾動條,讓表頭也隨之移動
<script type="text/javascript">
//給表體的div綁定滾動條事件,
$("#sc-table-body-div").scroll(function(){
//兩種方式(一個是屬性設置,一二是方法設置)都寫上,設置表頭div的移動位置未表體的移動位置
try{$("#sc-table-head-div").attr("scrollLeft",$("#sc-table-body-
div").attr("scrollLeft"));}catch(e){}
try{$("#sc-table-head-div").scrollLeft($("#sc-table-body-div").scrollLeft());}catch(e){}
});
</script>
完成