Подключение нескольких полос прокрутки для прокрутки сразу с помощью jQuery

Question

Я разделил очень длинную (прокручиваемую) таблицу в более коротких таблицах, чтобы можно было добавлять полосы прокрутки с шагом в таблице. У меня есть некоторый скрипт, который позволяет полосу прокрутки вверху соответствовать полосе прокрутки в следующей таблице - но есть ли способ связать все таблицы, чтобы они все прокручивались одновременно, независимо от того, какую полосу прокрутки вы используете?

Так в настоящее время верхняя полоса прокрутки и первая нижняя полоса прокрутки будет контролировать все полосы прокрутки, но нижние не ...

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

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

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

 
.tableWide { 
 
\t width: 1500px; 
 
\t table-layout: fixed; 
 
\t 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 { 
 
\t overflow-x: auto; 
 
\t border-right: 2px solid #797979; 
 
\t box-sizing: border-box; 
 
\t width: 100%; 
 
\t margin-bottom:20px; 
 
} 
 

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

 
.tableWide { 
 
\t width: 1500px; 
 
\t table-layout: fixed; 
 
\t 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()