使用 jQuery 连接多个滚动条一次滚动

Question

我将很长的（滚动）table 拆分为较短的 table 以允许在 table 中以增量方式添加滚动条。我有一些脚本允许顶部的滚动条与以下 table 下的滚动条相匹配 - 但是有没有办法 link 所有 tables 所以它们都滚动无论您使用什么滚动条，都在同一时间？

所以目前顶部滚动条和第一个底部滚动条将控制所有滚动条，但较低的滚动条不...

$(function(){
 'use strict';
    $(".tableScrollTop").scroll(function(){
        $(".tableWide-wrapper")
            .scrollLeft($(".tableScrollTop").scrollLeft());
    });
    $(".tableWide-wrapper").scroll(function(){
        $(".tableScrollTop")
            .scrollLeft($(".tableWide-wrapper").scrollLeft());
    });
});

.tableWide-wrapper {
 overflow-x: auto;
 border-right: 2px solid #797979;
 box-sizing: border-box;
 width: 100%;
 margin-bottom:20px;
}

.tableScrollTop {
 overflow-x: scroll;
 box-sizing: border-box;
 margin: 0;
 height:20px;
 width: 100%;
}

.tableWide {
 width: 1500px;
 table-layout: fixed;
 margin-top: 0 !important;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="tableScrollTop"><div style="width:1500px; height:20px;"></div></div>
<div class="tableWide-wrapper" tabindex="0">
  <table class="table-2 tableWide">
    <tr>
      <td>table copy</td>
      <td>table copy</td>
      <td>table copy</td>
      <td>table copy</td>
     </tr>
  </table>
 </div>

<div class="tableWide-wrapper" tabindex="0">
  <table class="table-2 tableWide">
    <tr>
      <td>table copy</td>
      <td>table copy</td>
      <td>table copy</td>
      <td>table copy</td>
     </tr>
  </table>
 </div>

<div class="tableWide-wrapper" tabindex="0">
  <table class="table-2 tableWide">
    <tr>
      <td>table copy</td>
      <td>table copy</td>
      <td>table copy</td>
      <td>table copy</td>
     </tr>
  </table>
 </div>

Answer 1

您可以强制每个表格的 scrollLeft 成为您滚动的当前元素的 scrollLeft 的值：

$(function(){
    'use strict';
    $(".tableScrollTop,.tableWide-wrapper").scroll(function(){
        $(".tableWide-wrapper,.tableScrollTop")
            .scrollLeft($(this).scrollLeft());
    });
});

.tableWide-wrapper {
 overflow-x: auto;
 border-right: 2px solid #797979;
 box-sizing: border-box;
 width: 100%;
 margin-bottom:20px;
}

.tableScrollTop {
 overflow-x: scroll;
 box-sizing: border-box;
 margin: 0;
 height:20px;
 width: 100%;
}

.tableWide {
 width: 1500px;
 table-layout: fixed;
 margin-top: 0 !important;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="tableScrollTop"><div style="width:1500px; height:20px;"></div></div>
<div class="tableWide-wrapper" tabindex="0">
  <table class="table-2 tableWide">
    <tr>
      <td>table copy</td>
      <td>table copy</td>
      <td>table copy</td>
      <td>table copy</td>
     </tr>
  </table>
 </div>

<div class="tableWide-wrapper" tabindex="0">
  <table class="table-2 tableWide">
    <tr>
      <td>table copy</td>
      <td>table copy</td>
      <td>table copy</td>
      <td>table copy</td>
     </tr>
  </table>
 </div>

<div class="tableWide-wrapper" tabindex="0">
  <table class="table-2 tableWide">
    <tr>
      <td>table copy</td>
      <td>table copy</td>
      <td>table copy</td>
      <td>table copy</td>
     </tr>
  </table>
 </div>

解释如下：

$(".tableScrollTop,.tableWide-wrapper").scroll - 一旦你滚动任何 tableScrollTop class 或 tableWide-wrapper class 运行以下元素：

查找具有 tableScrollTop class 或 tableWide-wrapper class - $(".tableWide-wrapper,.tableScrollTop")
对于每个元素 - 将其 scrollLeft 值设置为刚刚滚动的当前元素的 scrollLeft 值：$(this).scrollLeft()

使用 jQuery 连接多个滚动条一次滚动

Connecting multiple scroll bars to scroll at once using jQuery

jquery

html-table

scrollbars