function funcsrcoll1() { rightdiv.scrollTop = leftdiv.scrollTop;//设置左边的div和右边div上下滚动距离相同，即左右上下滚动联动。 } function funcsrcoll2() { leftdiv.scrollTop = rightdiv.scrollTop;//设置左边的div和右边div上下滚动距离相同，即左右上下滚动联动。 Divtop.scrollLeft = rightdiv.scrollLeft;//设置左边的div和右边div左右滚动距离相同，即左右滚动联动。 } function funcsrcoll3() { rightdiv.scrollLeft =Divtop.scrollLeft;//设置左边的div和右边div左右滚动距离相同，即左右滚动联动。 }
<body style="scroll: no"> <form method="post" id="form1" name="form1"> <div style=" 200px; height: 443px; float: left; overflow: hidden;"> <div id="leftdiv" style=" 220px; height: 423px; overflow-y: auto; overflow-x: hidden;" onscroll="funcsrcoll1()"> <div id="divMenu" style="position: fixed; margin-top: 0px; 200px; height: 423px;"> <table cellpadding="0" cellspacing="1" width="100%" border="0" class="Table_List"> <tr class="ListTableHeader"> <td width="110px" nowrap="nowrap" align="center"> 部门 </td> <td width="90px" nowrap="nowrap" align="center"> 下属部门 </td> </tr> </table> </div> <table cellpadding="0" cellspacing="1" width="100%" border="0" class="Table_List"> </table> </div> </div> <div id="menudiv" style=" 80%; height: 23px;margin-left:100px; margin-top: 0px; overflow: hidden;"> <div id="Divtop" style=" 100%; height: 43px; overflow-x: auto; overflow-y: hidden;" onscroll="funcsrcoll3()"> <script type="text/javascript"> window.onload = function() { var width = $("#menudiv").width(); $("#menudiv").width(width - 20); $("#Divtop").width(width); } </script> <div id="divMain" style="margin-left:0px; 100%; height: 100%;" > <table cellpadding="0" cellspacing="1" width="150%" border="0" class="Table_List"> <tr class="ListTableHeader"> <td width="10%" nowrap="nowrap" align="center"> 有效 </td> <td width="10%" nowrap="nowrap" align="center"> 暂缓 </td> <td width="10%" nowrap="nowrap" align="center"> 未知 </td> <td width="8%" nowrap="nowrap" align="center"> 我租 </td> <td width="8%" nowrap="nowrap" align="center"> 他租 </td> <td width="8%" nowrap="nowrap" align="center"> 我售 </td> <td width="8%" nowrap="nowrap" align="center"> 他售 </td> <td width="8%" nowrap="nowrap" align="center"> 撤单 </td> <td width="8%" nowrap="nowrap" align="center"> 电话错误 </td> <td width="8%" nowrap="nowrap" align="center"> 待确认 </td> <td width="10%" nowrap="nowrap" align="center"> 已驳回 </td> </tr> </table> </div> </div> </div> <div id="rightdiv" style=" 80%; height: 420px; float: left; overflow: scroll" onscroll="funcsrcoll2()"> <div id="divinner" style="float:left; 100%;"> <script type="text/javascript"> window.onload = function() { var width = $("#menudiv").width(); $("#rightdiv").width(width + 20); $("#divinner").width(width); } </script> <table cellpadding="0" cellspacing="1" width="150%" border="0" class="Table_List"> </table> </div> </div> </form> </body> </html>