你能在div的两个平行边都有滚动条吗？

Question

我有这个表有很多列，所以我把它放在一个带溢出的div中：auto因此启用水平滚动。滚动条位于div的底部。我的问题是：你有2个滚动条，一个位于div的底部，另一个位于div的顶部？如果是的话，你怎么能实现呢？

Answer 1

您的回答可以在这里找到： horizontal scrollbar on top and bottom of table

这是你需要的小提琴： http://jsfiddle.net/TBnqw/1/

这是代码：

<强> HTML：

    <div class="wrapper1">
      <div class="div1"></div>
    </div>
    <div class="wrapper2">
      <div class="div2">
        <!-- Content Here -->
      </div>
    </div>

<强> CSS：

    .wrapper1, .wrapper2 {
      width: 300px;
      overflow-x: scroll;
      overflow-y:hidden;
    }

    .wrapper1 {height: 20px; }
    .wrapper2 {height: 200px; }

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

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

<强> JS：

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