显示网格顶部和底部的滚动条

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