「うわっ…私のコンテンツ領域、高すぎ…？」 Intersection Observer が思うように発火しない勘違いパターン
はじめに
Intersection Observer、使ってますか？ スクロールでのイベント制御のように不要なイベントが多発しないですし、Intersection Observer という名前にも格好良さがあります。 また基本的なブラウザ（IE は除く）にはライブラリなどを読み込ませる必要もなく、その上名前も格好いいですし、なんといってもやはり名前が格好いい。 **「Intersection Observer で実装しました。」**っていう響きが、なんかとってもそれっぽくて魅力的ですよね。
よくある使い方
「要素が ○ 割程度画面に入ってきたら、クラス名を付与するとかしてアニメーションを発火させよう。」 よくある使い方だと思います。自分は今までほとんどその使い方しかやった覚えがないです。
そんな Intersection Observer ですが、先日扱っていた時に思ったように動いてくれない場面がありました。
「ページ内の記事コンテンツが 8 割くらい読まれたらインプレッション飛ばして」
「あーなるほど。じゃあ Threshold を 0.8 に設定して、記事の 8 割部分が画面に入ってきたところでインプレッション飛ばしましょうか。。」
という発想で実装していきました。
See the Pen IntersectionObserver is not working by S.ieda (@shineda) on CodePen.
が、発火しませんでした。 （サンプルではインプレッションの代わりに文字色をオレンジに変更するよう実装しています。発火しませんが。）
Intersection Observer の Threshold オプションについて勘違いしていたこと
勘違いとは「Threshold を 0.8 に設定しておけば Intersection Observer が要素の 8 割の位置を監視し、画面と交差したタイミングでインプレッションが発火する」と思っていたことです。
試しに MDN ページのサンプル を検証ツールで 600px まで伸ばし、確認してみました。
自分の（勘違いしていた）認識では、要素を下までスクロールしたところで 100% が表示されているイメージでした。しかし実際に画面に表示されているのは 81% であり、この割合が Threshold を超えなかったので発火しなかったわけですね。 Intersection Observer が監視しているのは、あくまで「ターゲット要素とそのルート要素の交差する度合い（交差率）」であり、要素が画面よりも長い場合、要素が画面内にどれくらい表示されているかという比率で数値が打ち止めとなるようです。
解決方法案
アンカー用のタグを要素とは別に、絶対配置で親要素の 8 割位置に配置することで解決しました。 だいたい以下のようなコードで実装しています。 （サンプルではインプレッションの代わりに文字色をオレンジに変更するよう実装しています。発火が確認できない場合は直接 CodePen のページでご確認ください。）
See the Pen IntersectionObserver is working by S.ieda (@shineda) on CodePen.