IntersectionObserver 複数バグ? スクロール

1つのオブザーバで複数のアイテムを監視する場合、(頭も)バグる

結論

2つのオブザーバで同じコンテナ内の異なるアイテムをそれぞれ1つずつ監視することで解決した

 observer1.observe(document.querySelector(".container").firstElementChild)
 observer2.observe(document.querySelector(".container").lastElementChild);

失敗した例は observer 1つだけ

observer1.observe(document.querySelector(".container").firstElementChild)  
observer1.observe(document.querySelector(".container").lastElementChild)

経緯

例えばスクロールコンテナ内のアイテムを1つのオブザーバで複数監視する
交差した時にアイテムに色を付与する
1つ目が交差したら赤、2つ目が…青、3つ目が…緑に色を変化させる

この時、
監視したアイテムをコンテナに収まるように設定し、複数のアイテムが全て見えている状態であれば問題なく動作する
アイテムそれぞれ、赤、青、緑である

しかしスクロールとは、見えないアイテムをスクロールして見るというものである
そのためアイテムをコンテナからはみ出すように設定すると、おかしな挙動をする

なぜか、全て赤になる

スクロールしても、しても、全て赤に染まる
DOMを調べてみると監視の対象が undefined になったり、異なるアイテムを監視していたり、モンスター化する
それ以外にもさんざん検証してみたが、書ききれない

全てのアイテムがコンテナに収まり見えている状態のDOMは正常だが、収まらず見えない状態になると突然発症するので制御不能

今回はスクロールアイテムの最初と最後のアイテムを監視し、クリックしてスクロールする機能である矢印ボタンの表示/非表示をしたかった

最初のアイテムが見えているなら preview 矢印を非表示にして、現在地より前にアイテムは存在しないという意図を伝える
次へスクロールしてアイテムが見えなくなったらそれを表示させ、アイテムが前に存在する意図へ変更する
最後のアイテムまでスクロールしたなら next 矢印を非表示にして、ここから先はアイテムが存在しない意図にするもの