jquery - 使用 jQuery 连接多个滚动条以同时滚动

Question

我已将一个很长(滚动)的表格拆分为较短的表格，以允许在表格中以增量方式添加滚动条。我有一些脚本允许顶部的滚动条与下表下的滚动条相匹配 - 但是有没有办法链接所有表格，以便无论您使用什么滚动条，它们都会同时滚动？

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

$(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 类或 tableWide-wrapper 元素code> 类运行以下命令:

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