Connecting multiple scroll bars to scroll at once using jQuery

I have split a very long (scrolling) table in shorter tables to allow scroll bars to be added at increments down the table. I have some script that allows a scroll bar at the top to match the scroll bar under the following table - but is there a way to link all the tables so they all scroll at the same time no matter what scroll bar you use?

So currently the top scroll bar and the first bottom scroll bar will control all scroll bars but the lower ones do not...

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

Solution

You can force the scrollLeft of each of the tables to be the value of the scrollLeft of the current element that you scroll:

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

Here is the explanation:

$(".tableScrollTop,.tableWide-wrapper").scroll - once you scroll any element that is tableScrollTop class or tableWide-wrapper class run the following:

Find any element that has the tableScrollTop class or the tableWide-wrapper class - $(".tableWide-wrapper,.tableScrollTop")
For each element - set it's scrollLeft value to the scrollLeft value of the current element that was just scrolled: $(this).scrollLeft()