Скопировать положение скроллбара в другой

Question

У меня есть 2 таблицы в html со скроллбарами. Мне нужно чтобы, когда скроллишь в одной странице, тот же скролл дублировался и в другой. То есть одним скроллбаром на одной таблице можно было просколлить одновременно 2 таблицы. То есть скролл как бы копируется на скролл другой таблицы. Пока не нашла ни одного плагина или решения.

Answer 1

$('.table-wrapper').scroll(function(){
  var targetScrollLeft = this.scrollLeft;
  $('.table-wrapper').not(this).each(function(){
     this.scrollLeft  = targetScrollLeft;
  })
})

.table-wrapper{
  max-width: 100%;
  overflow: auto;
  margin: 0 0 40px;
}
table{
  border-collapse:collapse;
}
td{
  min-width: 33vw;
  text-align:center;
  border:1px solid;
  height: 2em;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="table-wrapper">
  <table>
    <tbody>
      <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
      </tr>
    </tbody>
  </table>
</div>
<div class="table-wrapper">
  <table>
    <tbody>
      <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
      </tr>
    </tbody>
  </table>
</div>

Answer 2

Данный метод, что сверху помог, но скролл при вертикальном прокручивании лагал, нашла еще одно решение и переделала его для вертикального скролла.

$('#table1').scroll(function () {
        if ($('#table1').is(":hover") === true) {
                $('#table2').scrollTop($('#table1').scrollTop());
        }
    });
    $('#table2').scroll(function () {
        if ($('#table2').is(":hover") === true) {
                $('#table1').scrollTop($('#table2').scrollTop());
        }
    });

БЛОГ НА HUSL

Скопировать положение скроллбара в другой

Ответы (2 шт):