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

199
25 апреля 2022, 05:50

У меня есть 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());
        }
    });
READ ALSO
Не работает :last-child

Не работает :last-child

не могу понять,почему не работает :last-child

329
Количество слайдов OwlCarousel 2

Количество слайдов OwlCarousel 2

Столкнулся со следующей проблемой: в слайдере OwlCarousel 2 при разрешении 1920 на 1080 пикселей не отображается необходимое количество слайдов, а именно...

197
Связи в базе данных (mysql)

Связи в базе данных (mysql)

Пытаюсь спроектировать базу данных (mysql) для будущего чата - мессенджераВот получившаяся на данный момент модель:

263