У меня есть 2 таблицы в html со скроллбарами. Мне нужно чтобы, когда скроллишь в одной странице, тот же скролл дублировался и в другой. То есть одним скроллбаром на одной таблице можно было просколлить одновременно 2 таблицы. То есть скролл как бы копируется на скролл другой таблицы. Пока не нашла ни одного плагина или решения.
$('.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>
Данный метод, что сверху помог, но скролл при вертикальном прокручивании лагал, нашла еще одно решение и переделала его для вертикального скролла.
$('#table1').scroll(function () {
if ($('#table1').is(":hover") === true) {
$('#table2').scrollTop($('#table1').scrollTop());
}
});
$('#table2').scroll(function () {
if ($('#table2').is(":hover") === true) {
$('#table1').scrollTop($('#table2').scrollTop());
}
});
Столкнулся со следующей проблемой: в слайдере OwlCarousel 2 при разрешении 1920 на 1080 пикселей не отображается необходимое количество слайдов, а именно...
Пытаюсь спроектировать базу данных (mysql) для будущего чата - мессенджераВот получившаяся на данный момент модель: