JavaScript「Intersection Observer」で要素が見えていないのにイベントが発火してしまう

Question

###実現したいこと
「Intersection Observer」を使い、要素が見えてからイベントを発火させたいです。

$(window).scroll(function(){});の代わりに「Intersection Observer」を使ってスクロールイベントを実装したのですが、要素が見えていないのにイベントが発火してしまう現象にぶつかってしまいました。

発生している問題

以下ソースコードは
.Blueが見えた段階でconsole.log('.Blueが表示されました');を実行するという処理と、
.Redが見えた段階でconsole.log('.Redが表示されました');を実行するという処理を実装しています。

しかし読み込み直後の段階にまでconsole.log('.Redが表示されました');が実行されてしまうのです。

###該当のソースコード
↓サンプル
https://jsfiddle.net/3syn1apv/

↓サンプルと同じコード

<header><div>menu1</div><div>menu2</div></header>

<section class="Gray">
  <div>contentsGray</div>
</section>

<section class="Red">
  <div>contentsRed</div>
</section>

<section class="Blue">
  <div>contentsBlue</div>
</section>

body {
    background: #fff;
    padding: 0;
    margin: 0;
}
section {
    height: calc(100vh - 50px);
    padding: 50px 0 0 0;
    background: gray;
}
section.Red.is_view{
    background: red;
}
section.Blue.is_view{
    background: blue;
}
header {
    display: flex;
    align-items: center;
    justify-content: space-evenly;    
    position: fixed;
    top: 0; right: 0; left: 0;
    height: 50px;
    background: black;
    color: white;
}

// .Redが見えたらクラス付与
const optionsRed = {
	// オプション指定なし
};
const observerRed = new IntersectionObserver((entries) => {
	entries.forEach(entry => {
		if( entry.isIntersecting ){
    	console.log('.Redが表示されました');
			$('.Red').addClass('is_view');
		}
	});
}, optionsRed);
observerRed.observe( $(".Red")[0] );

// .BLueが見えたらクラス付与
const observerBlue = new IntersectionObserver((entries) => {
	entries.forEach(entry => {
		if( entry.isIntersecting ){
			console.log('.Blueが表示されました');
      $('.Blue').addClass('is_view');
		}
	});
});
observerBlue.observe( $(".Blue")[0] );

試したこと

ぴったりだといけないのかと思い次のように「10%見えたとき（threshold: 0.1）」としてみたのですが、これでも読み込み直後に実行されてしまいました。

追記：Chromeで threshold: 0.1 で試したら平気でした。またFirefoxでもjsfiddleのsectionの高さが418.4pxの場合に平気でした。

const optionsRed = {
	// オプション指定なし
};

// ↓ 指定

const optionsRed = {
	threshold: 0.1 // 10%見えたとき
};

で解決したのは、HTMlから<header>をなくし、.section{height:100vh:}にするという次の方法です。

<!-- <header><div>menu1</div><div>menu2</div></header> -->

section {
    /* height: calc(100vh - 50px); */
    /* padding: 50px 0 0 0; */
    background: gray;
    height: 100vh; /* headerをなくしたので100vhへ変更 */
}

が…っ！！だめ、これではだめです。だって<header>は必要です。
どうすれば先の問題を、<header>周辺のデザインを変えることなくクリアできるでしょうか。

Comments

[cobm]

```
const optionsRed = {
root:null,
rootMargin: '0px',
threshold: 0.1
};
```

Chromeで試してみましたが、thresholdの指定がちょっとでもあればいけてそうな気がします。
ブラウザ等の条件によっても違うのかもしれないですが、
例えば、thresholdの値を0.5とか大きめの値にしても変わらないでしょうか？

[sofa]

いつもアドバイスありがとうございます。

たしかにChromeで threshold: 0.1 で試したら平気でした。
（そもそもthreshold指定しなくてはいけない点に納得できませんが…）

またFirefoxでもjsfiddleのsectionの高さが418.4pxの場合に平気でした。
（これは完全に意味不明です…）

新しい技術はなかなか難しいところがありますね…

Answer 1

「Intersection Observer」を使い、要素が見えてからイベントを発火させたい

未知の Observer でしたので確認してみました。

• MDN IntersectionObserver
• MDN IntersectionObserverEntry

threshold は イベント発火回数を交差率で指定するためのオプションのようです(複数回は配列指定)。
ご質問の jsfiddle.net のHTML/CSSを拝借し、pure javascript で試してみました。

section {
    height: calc(100vh - 50px);
    padding: 50px 0 0 0;
    background: pink;
}
section.Gray.is_view {
    background: gray;
}

const opts = {
  root: null, // 任意のHTML*Elementを指定して表示領域を設定できる
  rootMargin: '50px 0px 0px 0px', // viewport（root）のマージン指定例
  // 監視対象の交差率でイベント発火回数を指定
  // 未表示 <--                --> 表示しきった（解釈が微妙ですが）
  threshold: [0, 0.25, 0.75, 1]
};
let iObserver = new IntersectionObserver((entries) => {
  // entries is {Array.<IntersectionObserverEntry>}
  entries.forEach( (entry, idx) => {
    /*
    console.log({
      entryNumber: idx,
      isIntersecting: entry.isIntersecting,
      intersectionRatio: entry.intersectionRatio,
      rootBounds: JSON.stringify(entry.rootBounds),
      boundingClientRect: JSON.stringify(entry.boundingClientRect),
      intersectionRect: JSON.stringify(entry.intersectionRect )
    });
    */
    let elm = entry.target;
    // 指定した threshold と比較できる プロパティが intersectionRatio の様子
    if( entry.intersectionRatio < 0.25 || 0.75 < entry.intersectionRatio ) {
      elm.classList.remove("is_view");
      console.log(elm.className + 'を脱色');
      return;
    }
    else {
    //if( entry.isIntersecting ){ // コメントを受けて修正
      console.log(elm.className + 'を着色');
      elm.classList.add('is_view');
    }
  });

}, opts);
// 監視対象要素を登録
iObserver.observe( document.querySelector(".Gray") );
iObserver.observe( document.querySelector(".Red") );
iObserver.observe( document.querySelector(".Blue") );

---

追記）コードブロックを訂正してあります

IntersectionObserver は 「監視イベントであって、スクロールイベントではない」という点に着目すべきかもしれません（「何ピクセルスクロールしたから…」という考え方ではないように思います）。

MDNの説明にもあるように root（表示基準要素） と target（監視対象要素） との２つの矩形の重なり具合（交差率）を監視するもので、スクロールが発生したときには、重なり具合の再計算が行われているのでスクロールにも使える実装のようです。

しきい値に設定した１回以上の任意のタイミングで発火させることができるので、回答に例示したコードでは４つのタイミングで「重なり具合を意味する entry.intersectionRatio」で切り分ける処理をイベントリスナに書いたつもりです。他にもイベント発火を１回にしつつ、矩形情報 BoundingRect を比較演算した結果を切り分ける条件もできそうです。

※CODEPEN でも動かしてみました。
（ゆっくりスクロール操作すると、重なり具合が 25%~75% のときに着色される動作になっています）

root(デフォルトはviewport)の矩形に対して、監視指定した要素の交差率を考えるだけで良いため、
コンストラクタに渡すオプションには、表示の変化をイメージして、マージンやしきい値を定義する必要があるようです。

前回のご質問で cobm さんの回答にあるリンク先の説明も読み返してみると解りやすいかと思います。

Comments

[sofa]

以下はそちらをコピペし、.Redだけにして他をコメントアウトしたものになりますが
https://jsfiddle.net/veLcm9h4/
やはり読み込み直後に「Redを着色」が表示されてしまいます。
そして質問にあるようにsectionのheightが418.4pxの場合は正常となり、質問と同様の状態でした。

[AkitoshiManabe]

> やはり読み込み直後に「Redを着色」が表示されてしまいます。
entry.isIntersecting で切り分けているからだと思います（監視対象であれば 常に true になる様子）。
MDN を読んで後の、私なりの理解を回答欄に追記しました。

[oikashinoa]

昔の事なので詳細忘れましたが…
jsfiddleかcodepenでIntersection Observerで似た症状になって、ローカルでサーバー立てて動かしたら想定通りの動きになった覚えが有ります。
https://teratail.com/questions/177307

一度ローカルで試してみてはいかがでしょうか？