Я пытаюсь синхронизировать c прокрутку одной и той же таблицы на двух windows через BroadcastChannel. Это работает, но после некоторой прокрутки я получаю рекурсию и не знаю, как с этим справиться.
Код:
<!DOCTYPE html>
<head>
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
</head>
<style>
.scroll-class{
background-color:blanchedalmond;
height: 30vh;
overflow: auto;
}
</style>
<body>
<div class="scroll-class" id="scrollTable">
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>
</div>
</body>
<script>
const bc = new BroadcastChannel('table_height');
$("#scrollTable").on( 'scroll', function(){
var height = $("#scrollTable").scrollTop();
bc.postMessage(height);
});
bc.onmessage = function (ev) {
console.log(ev);
$("#scrollTable").scrollTop(ev.data);
}
</script>
</html>
Когда я запускаю страницу на двух вкладках, когда я немного прокручиваю ее, она запускает рекурсию между переданными значениями. Мои вкладки имеют разную высоту. Я не знаю, относится ли это к делу.