顯示網格頂部和底部的滾動條

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; 
    }