回答編集履歴
2
加筆
test
CHANGED
|
@@ -134,7 +134,7 @@
|
|
|
134
134
|
|
|
135
135
|
|
|
136
136
|
|
|
137
|
-
MDNの説明にもあるように root（表示基準要素） と target（監視対象要素） との２つの矩形の重なり具合（交差率）を監視するもので、スクロールが発生
|
|
137
|
+
MDNの説明にもあるように root（表示基準要素） と target（監視対象要素） との２つの矩形の重なり具合（交差率）を監視するもので、スクロールが発生したときには、重なり具合の再計算が行われているのでスクロールにも使える実装のようです。
|
|
138
138
|
|
|
139
139
|
|
|
140
140
|
|
|
@@ -146,11 +146,13 @@
|
|
|
146
146
|
|
|
147
147
|
※CODEPEN でも[動かしてみました](https://codepen.io/AkitoshiManabe/pen/zYvKxvL?editors=1111)。
|
|
148
148
|
|
|
149
|
+
（ゆっくりスクロール操作すると、重なり具合が 25%~75% のときに着色される動作になっています）
|
|
150
|
+
|
|
149
151
|
|
|
150
152
|
|
|
151
153
|
root(デフォルトはviewport)の矩形に対して、監視指定した要素の交差率を考えるだけで良いため、
|
|
152
154
|
|
|
153
|
-
コンストラクタに渡す
|
|
155
|
+
コンストラクタに渡すオプションには、表示の変化をイメージして、マージンやしきい値を定義する必要があるようです。
|
|
154
156
|
|
|
155
157
|
|
|
156
158
|
|
1
追記
test
CHANGED
|
@@ -96,9 +96,9 @@
|
|
|
96
96
|
|
|
97
97
|
}
|
|
98
98
|
|
|
99
|
+
else {
|
|
99
100
|
|
|
100
|
-
|
|
101
|
-
if( entry.isIntersecting ){
|
|
101
|
+
//if( entry.isIntersecting ){ // コメントを受けて修正
|
|
102
102
|
|
|
103
103
|
console.log(elm.className + 'を着色');
|
|
104
104
|
|
|
@@ -121,3 +121,37 @@
|
|
|
121
121
|
iObserver.observe( document.querySelector(".Blue") );
|
|
122
122
|
|
|
123
123
|
```
|
|
124
|
+
|
|
125
|
+
|
|
126
|
+
|
|
127
|
+
----
|
|
128
|
+
|
|
129
|
+
追記）コードブロックを訂正してあります
|
|
130
|
+
|
|
131
|
+
|
|
132
|
+
|
|
133
|
+
IntersectionObserver は 「監視イベントであって、スクロールイベントではない」という点に着目すべきかもしれません（**「何ピクセルスクロールしたから…」という考え方ではない**ように思います）。
|
|
134
|
+
|
|
135
|
+
|
|
136
|
+
|
|
137
|
+
MDNの説明にもあるように root（表示基準要素） と target（監視対象要素） との２つの矩形の重なり具合（交差率）を監視するもので、スクロールが発生すしたときには、重なり具合の再計算が行われているのでスクロールにも使える実装のようです。
|
|
138
|
+
|
|
139
|
+
|
|
140
|
+
|
|
141
|
+
しきい値に設定した１回以上の**任意のタイミングで発火させることができる**ので、回答に例示したコードでは４つのタイミングで「重なり具合を意味する entry.intersectionRatio」で切り分ける処理をイベントリスナに書いたつもりです。他にもイベント発火を１回にしつつ、矩形情報 BoundingRect を比較演算した結果を切り分ける条件もできそうです。
|
|
142
|
+
|
|
143
|
+
|
|
144
|
+
|
|
145
|
+
|
|
146
|
+
|
|
147
|
+
※CODEPEN でも[動かしてみました](https://codepen.io/AkitoshiManabe/pen/zYvKxvL?editors=1111)。
|
|
148
|
+
|
|
149
|
+
|
|
150
|
+
|
|
151
|
+
root(デフォルトはviewport)の矩形に対して、監視指定した要素の交差率を考えるだけで良いため、
|
|
152
|
+
|
|
153
|
+
コンストラクタに渡す、オプションには、表示の変化をイメージして、マージンやしきい値を定義する必要があるようです。
|
|
154
|
+
|
|
155
|
+
|
|
156
|
+
|
|
157
|
+
[前回のご質問で cobm さんの回答](https://teratail.com/questions/257427#reply-370478)にあるリンク先の説明も読み返してみると解りやすいかと思います。
|