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

Question

我在较短的表格中拆分了一个非常长的（滚动）表格，以允许在表格的下方添加滚动条。我有一些脚本允许顶部的滚动条匹配下表下的滚动条 - 但有没有办法链接所有表，所以无论你使用什么滚动条，它们都会同时滚动？

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

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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类或tableWide-wrapper类的元素后，运行以下命令：

1. 查找包含tableScrollTop班级或tableWide-wrapper班级的所有元素 - $(".tableWide-wrapper,.tableScrollTop")
2. 对于每个元素 - 将其scrollLeft值设置为刚刚滚动的当前元素的scrollLeft值：$(this).scrollLeft()