IntersectionObserverのrootとして指定できるのは親要素か祖先要素のみ

Intersection Observer API、便利ですね。簡単に言うと、要素が交差しているかを判定してくれるAPIです。これを使うと、例えば画面にある要素が表示されているか判定するコードを楽に書くことができます。

このAPIにはオプションがあり、rootというものもその一つです。これは、ある要素がどの要素またはビューポートと交差したときにtrueと判定するか決められる機能です。しかし、その要素は何でも指定できるわけではなく、親要素か祖先要素のみに限られているようです。

兄弟要素を指定してうまく判定できず、かなり調べてこの簡単な結論に行き着いたのでまとめておきます。結局rootはnullのまま、rootMarginを頑張って調整して実装しました。