【Vanilla JS】スクロールに合わせた背景色の切り替え処理（Intersection Observer API使用）

概要

用途・要件

• 監視対象の要素に対して、「data-bg-color=”#007bbb”」のようにdata属性に背景色を設定する。
• スクロールして監視対象の要素が画面上部に到達したタイミングで設定した背景色に変更される。cssのtransitionを設定する事で、フワッと色が切り替わる。
• 本記事ではbody要素の背景色を切り替えている。
• scroll、reseizeイベントを使用せず、Intersection Observer APIを使用。（ブラウザへの負荷が少ない）

検証ブラウザ

• Google Chrome(最新)
• Safari(最新)
• Firefox(最新)
• Microsoft Edge(最新)

注意事項

• DEMOプレビューで正常に動作しないためDEMOは表示しておりません。ソースコードをローカル環境に移設して動作確認をしてください。

実装