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

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 selector(#)。

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