特定の要素が見えている、もしくは消えた段階でイベントを発火させたいケースで使う処理をメモ。
【JavaScript】特定の要素が画面に見えているかどうかを判定する方法
はい、というわけでまんま導入文の通りですが、特定の要素が見えている、もしくは消えた段階でイベントを発火させたいケースってよくありますよね。
例えば、下にスクロールした際に『ヘッダーをブラウザ外に隠す（上に引っ込ませる）』とか、『TOPへ戻るボタンを出現させる』とか。
それらはスクロール量を基準とした発火条件ならスクロール量で制御すればいいのですが、例えば条件が
- 固定ヘッダーの背景色がテキストの視認性を考慮してキービジュアル上では透明
- スクロールしてキービジュアルを過ぎたらコンテンツ上だと背景色が透明な場合テキストが読みづらくなるので固定ヘッダーに背景色を付与したい
ってな場合、例えばキービジュアルの高さをscroll量で取得して発火条件とすればイケる？と思ったんですが、レスポンシブ対応でキービジュアルの高さが可変する場合、ややこしいじゃないですか。（いい方法あったら教えてください）
ということで、イベントの発火条件を『キービジュアルを通り過ぎたら』、つまり『キービジュアルが画面の外に消えたら』でやってみました。
これならキービジュアルの高さが可変でもあらゆるブラウザ幅に対応できるかなと。
Intersection Observer API
Intersection Observer API は、「画面上のある要素が、ブラウザ上の表示されている領域（viewport）に対してどの位置にあるかを監視して教えてくれる」という機能を持つ交差監視APIです。（IE対応はPolyfillが必要です）
developer.mozilla.org要は、ブラウザ上のページをスクロールした時に、特定の要素= target がブラウザの表示領域に交わったかどうか（表示領域=viewportに入った時と出た時）を検知してくれます。
scrollイベントのように、ちょっとスクロールしただけで何回もイベント発火させてしまうよりはパフォーマンス的にも良いのではないでしょうか。
ということで、先述した『ヘッダーの背景色を変える』サンプルをご紹介。
サンプル１：キービジュアルを通り過ぎるとヘッダー背景色が変化
See the Pen header BGC change by nkmr (@nkmr_whoo) on CodePen.
上記の例だと、緑背景の固定ヘッダーがキービジュアルに模した黄色い箱より下にスクロールするとイベントが発火し、固定ヘッダーの背景色はピンクになっています。
サンプル２：キービジュアルを通り過ぎるとトップへ戻るボタンが出現
See the Pen to top button view by nkmr (@nkmr_whoo) on CodePen.
見た目はさっきと同じサンプルですが、今度は黄色い箱が画面から消えると左からトップに戻るボタンが出現します。
トップに戻る際はスムーススクロールを使ってあげると面白いかもです▼
サンプル３：特定のクラスを持つ要素が可視範囲に入ったら表示させる
See the Pen element is visible by nkmr (@nkmr_whoo) on CodePen.
要素を隠している「hidden」というクラスを持つ要素が可視範囲に入ったらタイミングで要素を出現させるためのクラス「js-fadeIn」を付与、「hidden」を除去しています。
スクロールするたびにふわふわっと出現する要素が必要な場合には↑で対応できます。
まとめ
けっこう色んなケースで使えるんじゃないかと思いメモしておきました。
他にもサンプルができたら追記していきたいと思います。
参考にさせていただきました↓
