Синхронизируйте прокрутку между разделами, в которых есть элементы с динамически изменяющейся высотой

#javascript #html

#javascript #html

Вопрос:

Я хочу синхронизировать прокрутку между тегами div с разделителями, которые динамически изменяют размер каждого элемента в чистом JavaScript, чтобы прокрутка обоих тегов совпадала в конце каждого элемента.

Следующий код вызовет постепенный сдвиг и не будет синхронизироваться чисто

Кто-нибудь, пожалуйста, может мне помочь?

 lt;div class="container"gt;  lt;div id="content1"gt; // The number of div tags below does not necessarily match either.  lt;div id="content1-1"gt;...lt;/divgt;  lt;div id="content1-2"gt;...lt;/divgt;  lt;div id="content1-3"gt;...lt;/divgt;  ...  lt;/divgt;  lt;div id="content2"gt; // The number of div tags below does not necessarily match either.  lt;div id="content2-1"gt;...lt;/divgt;  lt;div id="content2-2"gt;...lt;/divgt;  lt;div id="content2-3"gt;...lt;/divgt;  ...  lt;/divgt; lt;/divgt;   
 const leftDiv = document.getElementById("content1"); const rightDiv = document.getElementById("content2"); let isSyncingLeftScroll = false; let isSyncingRightScroll = false;  leftDiv.onscroll = function () {  if (!isSyncingLeftScroll) {  isSyncingRightScroll = true;  rightDiv.scrollTop = this.scrollTop;  }  isSyncingLeftScroll = false; };  rightDiv.onscroll = function () {  if (!isSyncingRightScroll) {  isSyncingLeftScroll = true;  leftDiv.scrollTop = this.scrollTop;  }  isSyncingRightScroll = false; };  

Идеальный образ введите описание изображения здесь