実現したいこと
JS(できれば pure js)で以下のイメージ図のように左右に並べたコンテンツでスクロールの同期を行い、
その各項目(下の図で言うところの青・オレンジの箇所が項目に該当)の終端で一致させる
ようなアイディアなどございましたらご教授いただきたいです。
イメージ図
イメージ的には左がエディタ画面で右がプレビュー画面で共にスクロールが同期するイメージです。
現状の実装
以下のコードで現状実装しておりますが、これだと徐々に左右のスクロール量がずれていき、大きなHTMLだと
その差異がより顕著に現れとてもスクロール同期と呼べる代物とはなくなってしまいます。。
そのため、各項目の終端をブレークポイントのような形でそこで一致(帳尻を合わせる)させるような方法で実現できないかと考えています。
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;
};
補足
もしかしたら、Intersection Observer APIが利用できる?
https://developer.mozilla.org/ja/docs/Web/API/Intersection_Observer_API