如何在一个div中的拖动overflow-x ，使另一个div同步移动

Question

<script>
function doit(){
   var obj1 = document.getElementById("headerArea");
   var obj2 = document.getElementById("listBox");
//   alert(obj2.scrollLeft)
   obj1.style.left = parseInt(obj1.clientLeft) - obj2.scrollLeft;
}
</script>
<DIV id=aa style="WIDTH: 500px; HEIGHT: 500px">
<DIV class=SigmaList style="OVERFLOW: auto; WIDTH: 500px; HEIGHT: 100%">
<DIV id=headerArea style="BORDER-RIGHT: 0px; BORDER-TOP: 0px; OVERFLOW: hidden; BORDER-LEFT: 0px; WIDTH: 100%; BORDER-BOTTOM: 0px; POSITION: relative; HEIGHT: 20px">
<table >
<tr>
<td>
</td>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx<td>
</td>xxxxxx<td>
</td>
</tr>
</table>
</DIV>
<DIV></DIV>
<DIV class=listBox id=listBox onscroll="doit()" style="OVERFLOW: auto; WIDTH: 498px; HEIGHT: 478px">
<DIV id=listArea style="Z-INDEX: 1; WIDTH: 1178px; HEIGHT: 500px">
<table >
<tr>
<td>
</td>qqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqq<td>
</td><td>
</td>
</tr>
</table>
</DIV>
</DIV>
</DIV>
</DIV>