要素の表示状態を監視する
オブザーバーを作成して要素を監視します。
「要素の表示状態を監視する」はCoddyKit上の無料JavaScript Academyレッスンです。 これはレッスン1/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはJavaScript Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 JavaScript Academyコースには全4レッスンが含まれています。
Intersection Observer が必要な理由
従来、要素がビューポートに入ったことを検出するには、scroll を監視し、getBoundingClientRect を何度も呼び出す必要がありました。その方法は遅く、カクつきの原因になります。
Intersection Observer API は、メインスレッド外で可視性を効率的かつ非同期に監視します。
オブザーバーの作成
new IntersectionObserver(callback) でオブザーバーを作成します。監視対象の要素の可視性がしきい値をまたぐたびに、コールバックが実行されます。
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
console.log(entry.target, entry.isIntersecting);
});
});要素の監視
observer.observe(element) を呼び出すと、対象の監視を開始できます。1 つのオブザーバーで複数の要素を監視できます。
const box = document.querySelector('.box');
observer.observe(box);
// Watch several at once:
document.querySelectorAll('.card')
.forEach(el => observer.observe(el));isIntersecting フラグ
各エントリには boolean の isIntersecting があり、対象が現在ルート（デフォルトではビューポート）と重なっているかどうかを示します。
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
console.log('element is now visible');
}
});
});エントリの詳細
各 IntersectionObserverEntry には、次のような便利なデータが含まれています。
target— 監視対象の要素isIntersecting— ルートと交差しているかどうかintersectionRatio— 表示されている割合（0 から 1）boundingClientRect— 対象の矩形
(entries) => {
entries.forEach(e => {
console.log('visible portion:', e.intersectionRatio);
});
}threshold オプション
threshold オプションは、どの可視率でコールバックを呼び出すかを制御します。0 では1ピクセルでも表示されると呼び出され、1 では完全に表示された場合にのみ呼び出されます。
const observer = new IntersectionObserver(callback, {
threshold: 0.5 // fire when 50% visible
});
// You can pass an array for multiple steps:
// threshold: [0, 0.25, 0.5, 0.75, 1]root オプション
デフォルトでは、オブザーバーはブラウザのビューポートを基準に測定します。root にスクロール可能な祖先要素を設定すると、代わりにそのコンテナ内での可視性を測定できます。
const list = document.querySelector('.scroll-area');
const observer = new IntersectionObserver(callback, {
root: list // measure visibility inside this container
});rootMargin オプション
rootMargin は CSS のマージンと同じように、root の境界ボックスを拡大または縮小します。正の値を指定すると、要素が実際に画面に表示される前にコールバックが呼び出されます。
const observer = new IntersectionObserver(callback, {
rootMargin: '200px' // start reacting 200px before visible
});監視の停止
1つの要素の監視を停止するには observer.unobserve(element) を呼び出し、すべての要素の監視を停止するには observer.disconnect() を呼び出します。これは後処理や1回限りのトリガーに重要です。
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
doSomething(entry.target);
observer.unobserve(entry.target); // fire once
}
});
});効率的な理由
ブラウザは交差を内部で計算し、通知をまとめて処理します。そのため、スクロールのフレームごとに JavaScript を実行する必要がありません。これによりレイアウトスラッシングを防ぎ、多数の対象があってもスクロールを滑らかに保てます。
よくある用途
Intersection Observer は、実際の多くの機能を支えています。
- 画像や iframe の遅延読み込み
- 無限スクロール
- スクロールをトリガーにしたアニメーション
- 広告やコンテンツのインプレッションの追跡
この後、これらのいくつかを実装します。
確認問題
Intersection Observer の基本についての理解度を確認します。
まとめ
Intersection Observer の基本を学びました。
new IntersectionObserver(callback, options)で作成します。observeで監視を開始し、unobserve/disconnectで停止します。- 各エントリから
isIntersectingとintersectionRatioを取得できます。 threshold、root、rootMarginで呼び出しのタイミングを調整します。- スクロールリスナーよりもはるかに効率的です。
次は、これを使って画像を遅延読み込みします。
よくある質問
「要素の表示状態を監視する」レッスンは無料ですか？
はい。「要素の表示状態を監視する」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、JavaScript Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 JavaScript Academyコースには全4レッスンが含まれています。
「要素の表示状態を監視する」で何を学びますか？
オブザーバーを作成して要素を監視します。 ブラウザで直接実行するハンズオンコードでJavaScript Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
JavaScript Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのJavaScript Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン1/4です。
「要素の表示状態を監視する」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このJavaScript Academyレッスンでコードを書いて実行できますか？
はい。すべてのJavaScript Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。
このコースのすべてのレッスン
- 要素の表示状態を監視する
- 画像の遅延読み込み
- 無限スクロール
- スクロールで発火するアニメーション