PureJS(できれば)でスクロール同期を行いたい。

実現したいこと

JS(できれば pure js)で以下のイメージ図のように左右に並べたコンテンツでスクロールの同期を行い、
その各項目(下の図で言うところの青・オレンジの箇所が項目に該当)の終端で一致させる
ようなアイディアなどございましたらご教授いただきたいです。

イメージ図

イメージ的にはteratailの質面編集画面(左がエディタ画面で右がプレビュー画面で共にスクロールが同期する)のイメージです。

現状の実装

以下のコードで現状実装しておりますが、これだと徐々に左右のスクロール量がずれていき、大きなHTMLだと
その差異がより顕著に現れとてもスクロール同期と呼べる代物とはなくなってしまいます。。

そのため、各項目の終端をブレークポイントのような形でそこで一致(帳尻を合わせる)させるような手法を検討中です。

JavaScript
1const leftDiv = document.getElementById("content1");
2const rightDiv = document.getElementById("content2");
3let isSyncingLeftScroll = false;
4let isSyncingRightScroll = false;
5
6leftDiv.onscroll = function () {
7  if (!isSyncingLeftScroll) {
8    isSyncingRightScroll = true;
9    rightDiv.scrollTop = this.scrollTop;
10  }
11  isSyncingLeftScroll = false;
12};
13
14rightDiv.onscroll = function () {
15  if (!isSyncingRightScroll) {
16    isSyncingLeftScroll = true;
17    leftDiv.scrollTop = this.scrollTop;
18  }
19  isSyncingRightScroll = false;
20};
21