謎のスクロール位置調整テクノロジー：制作者による解説
需要があるらしいので解説します。fav見た感じWebのことはよくご存知と思われる方々ばかりだったので、要所だけ。
まずは解決したい問題の確認です。今回直したいガタガタとはこのようなものです。
右の人が編集すると、左の人の画面が動いてしまうのが問題です。
https://gyazo.com/f01fe46d24dfcfaa9bfd240168a828eb
原因。ドキュメント上の自分の見えている部分よりも上に何かを突っ込まれると、相対的に画面が下がったように見えます。
HTMLでは基本的に上から下に要素が配置されていくため、押し出されてしまう訳です。（CSSで下から上に配置していくと逆向きのことがおきます）
https://gyazo.com/cdc0324de643fa8f9560628e71be2b7c
解決策。押し出された事を検知して、追いかけるようにスクロールします。100px増えたら window.scrollby(0, 100) 、減ったらマイナスします。そうすればユーザーの見える画面は変わりません。仕組みの解説は以上。
実装上のポイントは２つあります↓
https://gyazo.com/73658c89e06dfadc2c622eb48b4bcfc3
①要素のリサイズを監視する
これはResizeObserverを使います。要素がDOMツリーにappendされた直後（Reactでいうとマウントされた時）にobserveする必要があります。 ROではリサイズ後の高さしか分からないので、リサイズ前の高さを保持しておくのがポイントです。
②見えている領域よりも上にあるものにだけ反応する
以上です。他に試してみたけどダメだったボツ案もあるのですが、それはまた別の機会に…
ちなみにご覧の通りclient jsで完結しているため、実はScrapboxのUserScriptでPoCを書いて２ヶ月ほど実際に使い続けていましたが、とても快適でした。この快適さを皆さんにもお届けできて心底嬉しいです。