javascript 滚动条问题

我现在两个表格，每个表格有一个滚动条，
要实现这两个滚动条联动，这个怎么做？？

解决方案 »

  1.   

    垂直的<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题文档</title>
    </head><body>
    <script language="javascript">function moveTogether(one, other){
    var div2 = document.getElementById(other);
    div2.scrollTop = one.scrollTop;
    }</script><div>
    <table>
       <tr>
        <td>
         <div id="upDiv" style="height: 233px;overflow: hidden;" onscroll="moveTogether(this,'downDiv')">
              <table style="table-layout: fixed;" height="300px" border="3" cellPadding="3" cellSpacing="3">
               <tr>
                <td>
                 33333333333333
                </td>
                <td>
                 1111111111111111111
                </td>
                <td>
                 1111111111111111111
                </td>
               </tr>
               <tr>
                <td>
                 1111111111111111111
                </td>
                <td>
                 1111111111111111111
                </td>
                <td>
                 1111111111111111111
                </td>
               </tr>
               <tr>
                <td>
                 1111111111111111111
                </td>
                <td>
                 1111111111111111111
                </td>
                <td>
                 1111111111111111111
                </td>
               </tr>
              </table>
         </div>
        </td>
        <td>
         <div id="downDiv" style="height: 233px;overflow-y: scroll;overflow-x: hidden;" onscroll="moveTogether(this,'upDiv')">
              <table style="table-layout: fixed;" height="300px" border="3" cellPadding="3" cellSpacing="3">
               <tr>
                <td>
                 1111111111111111111
                </td>
                <td>
                 1111111111111111111
                </td>
                <td>
                 1111111111111111111
                </td>
               </tr>
               <tr>
                <td>
                 1111111111111111111
                </td>
                <td>
                 1111111111111111111
                </td>
                <td>
                 1111111111111111111
                </td>
               </tr>
               <tr>
                <td>
                 1111111111111111111
                </td>
                <td>
                 1111111111111111111
                </td>
                <td>
                 1111111111111111111
                </td>
               </tr>
              </table>
         </div>
        </td>
       </tr>
    </table>
    </div>
    </body>
    </html>水平的 <script language="javascript">function moveTogether(one, other){
    var div2 = document.getElementById(other);
    div2.scrollLeft = one.scrollLeft;
    }</script>
      

  2.   

    水平的  
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题文档</title>
    </head><body>
    <script language="javascript">function moveTogether(one, other){
    var div2 = document.getElementById(other);
    div2.scrollLeft = one.scrollLeft;
    }</script><div>
    <div id="upDiv" style="width: 233px;overflow: scroll;" onscroll="moveTogether(this,'downDiv')">
           <table style="table-layout: fixed;" width="300px" border="3" cellPadding="3" cellSpacing="3">
            <tr>
             <td>
              33333333333333
             </td>
             <td>
              1111111111111111111
             </td>
             <td>
              1111111111111111111
             </td>
            </tr>
            <tr>
             <td>
              1111111111111111111
             </td>
             <td>
              1111111111111111111
             </td>
             <td>
              1111111111111111111
             </td>
            </tr>
            <tr>
             <td>
              1111111111111111111
             </td>
             <td>
              1111111111111111111
             </td>
             <td>
              1111111111111111111
             </td>
            </tr>
           </table>
    </div><div id="downDiv" style="width: 233px;overflow: scroll;" onscroll="moveTogether(this,'upDiv')">
           <table style="table-layout: fixed;" width="300px" border="3" cellPadding="3" cellSpacing="3">
            <tr>
             <td>
              1111111111111111111
             </td>
             <td>
              1111111111111111111
             </td>
             <td>
              1111111111111111111
             </td>
            </tr>
            <tr>
             <td>
              1111111111111111111
             </td>
             <td>
              1111111111111111111
             </td>
             <td>
              1111111111111111111
             </td>
            </tr>
            <tr>
             <td>
              1111111111111111111
             </td>
             <td>
              1111111111111111111
             </td>
             <td>
              1111111111111111111
             </td>
            </tr>
           </table>
    </div>
    </div>
    </body>
    </html>