回答編集履歴
2
加筆
answer
CHANGED
|
@@ -66,14 +66,15 @@
|
|
|
66
66
|
|
|
67
67
|
IntersectionObserver は 「監視イベントであって、スクロールイベントではない」という点に着目すべきかもしれません（**「何ピクセルスクロールしたから…」という考え方ではない**ように思います）。
|
|
68
68
|
|
|
69
|
-
MDNの説明にもあるように root（表示基準要素） と target（監視対象要素） との２つの矩形の重なり具合（交差率）を監視するもので、スクロールが発生
|
|
69
|
+
MDNの説明にもあるように root（表示基準要素） と target（監視対象要素） との２つの矩形の重なり具合（交差率）を監視するもので、スクロールが発生したときには、重なり具合の再計算が行われているのでスクロールにも使える実装のようです。
|
|
70
70
|
|
|
71
71
|
しきい値に設定した１回以上の**任意のタイミングで発火させることができる**ので、回答に例示したコードでは４つのタイミングで「重なり具合を意味する entry.intersectionRatio」で切り分ける処理をイベントリスナに書いたつもりです。他にもイベント発火を１回にしつつ、矩形情報 BoundingRect を比較演算した結果を切り分ける条件もできそうです。
|
|
72
72
|
|
|
73
73
|
|
|
74
74
|
※CODEPEN でも[動かしてみました](https://codepen.io/AkitoshiManabe/pen/zYvKxvL?editors=1111)。
|
|
75
|
+
（ゆっくりスクロール操作すると、重なり具合が 25%~75% のときに着色される動作になっています）
|
|
75
76
|
|
|
76
77
|
root(デフォルトはviewport)の矩形に対して、監視指定した要素の交差率を考えるだけで良いため、
|
|
77
|
-
コンストラクタに渡す
|
|
78
|
+
コンストラクタに渡すオプションには、表示の変化をイメージして、マージンやしきい値を定義する必要があるようです。
|
|
78
79
|
|
|
79
80
|
[前回のご質問で cobm さんの回答](https://teratail.com/questions/257427#reply-370478)にあるリンク先の説明も読み返してみると解りやすいかと思います。
|
1
追記
answer
CHANGED
|
@@ -47,8 +47,8 @@
|
|
|
47
47
|
console.log(elm.className + 'を脱色');
|
|
48
48
|
return;
|
|
49
49
|
}
|
|
50
|
-
|
|
50
|
+
else {
|
|
51
|
-
if( entry.isIntersecting ){
|
|
51
|
+
//if( entry.isIntersecting ){ // コメントを受けて修正
|
|
52
52
|
console.log(elm.className + 'を着色');
|
|
53
53
|
elm.classList.add('is_view');
|
|
54
54
|
}
|
|
@@ -59,4 +59,21 @@
|
|
|
59
59
|
iObserver.observe( document.querySelector(".Gray") );
|
|
60
60
|
iObserver.observe( document.querySelector(".Red") );
|
|
61
61
|
iObserver.observe( document.querySelector(".Blue") );
|
|
62
|
-
```
|
|
62
|
+
```
|
|
63
|
+
|
|
64
|
+
----
|
|
65
|
+
追記）コードブロックを訂正してあります
|
|
66
|
+
|
|
67
|
+
IntersectionObserver は 「監視イベントであって、スクロールイベントではない」という点に着目すべきかもしれません（**「何ピクセルスクロールしたから…」という考え方ではない**ように思います）。
|
|
68
|
+
|
|
69
|
+
MDNの説明にもあるように root（表示基準要素） と target（監視対象要素） との２つの矩形の重なり具合（交差率）を監視するもので、スクロールが発生すしたときには、重なり具合の再計算が行われているのでスクロールにも使える実装のようです。
|
|
70
|
+
|
|
71
|
+
しきい値に設定した１回以上の**任意のタイミングで発火させることができる**ので、回答に例示したコードでは４つのタイミングで「重なり具合を意味する entry.intersectionRatio」で切り分ける処理をイベントリスナに書いたつもりです。他にもイベント発火を１回にしつつ、矩形情報 BoundingRect を比較演算した結果を切り分ける条件もできそうです。
|
|
72
|
+
|
|
73
|
+
|
|
74
|
+
※CODEPEN でも[動かしてみました](https://codepen.io/AkitoshiManabe/pen/zYvKxvL?editors=1111)。
|
|
75
|
+
|
|
76
|
+
root(デフォルトはviewport)の矩形に対して、監視指定した要素の交差率を考えるだけで良いため、
|
|
77
|
+
コンストラクタに渡す、オプションには、表示の変化をイメージして、マージンやしきい値を定義する必要があるようです。
|
|
78
|
+
|
|
79
|
+
[前回のご質問で cobm さんの回答](https://teratail.com/questions/257427#reply-370478)にあるリンク先の説明も読み返してみると解りやすいかと思います。
|