表格顶部和底部的水平滚动条

javascript jquery html css

2022-08-30 01:30:05

我的页面上有一个非常大的。所以我决定在桌子的底部放一个水平滚动条。但我希望这个滚动条也放在桌子上的顶部。table

我在模板中的内容是这样的：

<div style="overflow:auto; width:100%; height:130%">
<table id="data" style="width:100%">...</table>
</div>

这只能在HTML和CSS中完成吗？

答案 1

若要模拟元素顶部的第二个水平滚动条，请在具有水平滚动的元素上方放置一个“虚拟”，刚好足够高以使用滚动条。然后为虚拟元素和真实元素附加“scroll”事件的处理程序，以便在移动任一滚动条时使另一个元素同步。虚拟元素看起来像实际元素上方的第二个水平滚动条。div

有关实际示例，请参阅此小提琴

代码如下：

网页：

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

答案 2

尝试使用jquery.doubleScroll插件：

jQuery ：

$(document).ready(function(){
  $('#double-scroll').doubleScroll();
});

CSS ：

#double-scroll{
  width: 400px;
}

网页：

<div id="double-scroll">
  <table id="very-wide-element">
    <tbody>
      <tr>
        <td></td>
      </tr>
    </tbody>
  </table>
</div>