ウェブのリッチな表現としてスクロールに応じたエフェクトがあります。これまでJavaScriptのscrollイベントで実装していましたが、Intersection Observer APIを使うとより効率的に実装できます。ブラウザーのサポートも拡充し、今後は標準となる技術でしょう。 ▼スクロールで目次の色が変わるエフェクト 本記事ではIntersection Observer APIの使い方と実践例を解説します。 特定の位置で発火する従来の手法 これまで、特定の位置で発火するイベントにはscrollイベントを使う必要がありました。以下のコードは、あらかじめページ上部からの距離を取得し、スクロール量が規定に達したところで発火させる手法です。 window.addEventListener("scroll", () => { const srollVal = window.pageYOffse
![JSでのスクロール連動エフェクトにはIntersection Observerが便利 - ICS MEDIA](https://cdn-ak-scissors.b.st-hatena.com/image/square/c4074a397ed4b6584f92abc2aba7a673cb25c451/height=288;version=1;width=512/https%3A%2F%2Fics.media%2Fentry%2F190902%2Fimages%2Feyecatch.jpg)