グリッドの上下スクロールバーを表示

Question

グリッドの両側にスクロールバーを使用したり、マウスを動かしてスクロールグリッドを使用したいとします。

下のコードを試しましたが、下のスクロールバーは機能しますが、上のスクロールバーは機能しません。

<script >  
 
        $(function() { 
 
         
 
        $(".wrapper1").scroll(function() { 
 
         $(".wrapper2") 
 
          .scrollLeft($(".wrapper1").scrollLeft()); 
 
        }); 
 
        
 
        $(".wrapper2").scroll(function() { 
 
         $(".wrapper1") 
 
          .scrollLeft($(".wrapper2").scrollLeft()); 
 
        }); 
 
        }); 
 

 
        $(window).load(function() { 
 
         $('.div1').css('width', $('.div2').outerWidth()); 
 
        }); 
 
       
 
     
 
    </script>

がここ

コードを入力してください。これは、あるdiv要素のCSSは

<style type="text/css"> 
    .wrapper1, .wrapper2 { 
     width: 900px; 
     border: none 0px RED; 
     overflow-x: scroll; 
     overflow-y: hidden; 
    } 

    .wrapper1 { 
     height: 20px; 
    } 

    /*.wrapper2 { 
     height: 200px; 
    }*/ 

    .div1 { 
     width: 1000px; 
     height: 20px; 
    } 

    .div2 { 
     width: 1000px; 
     background-color: #88FF88; 
     overflow: auto; 
    } 

    </style> 

これは、HTML

<div class="wrapper1"> 
 
    <div class="div1"> 
 
     &nbsp; 
 
     </div> 
 
    </div> 
 

 
    <div class="wrapper2"> 
 
    <div id="div2"> 
 
      <%-- my grid-- %>         
 
     </div> 
 
     </div>

です

そして、これは

私の結果であるが、トップサイドバーは、私は、ブラウザのコンソールで同じjQueryの機能を貼り付けると

を仕事とスライダーの仕事の両方を入力しない適切

Answer 1

小観察：div2のCSSはidセレクタ（＃）でなければなりません。

#div2 { 
     width: 1000px; 
     background-color: #88FF88; 
     overflow: auto; 
    }