entriesの挙動の確認と、監視対象となるすべての要素に処理を設定していきます。
- entriesの挙動
- 処理の設定
entriesの挙動
・前回までで監視対象を増やす方法について見てきました。
・詳しくは『Intersection Observerで監視対象を増やす方法』の記事を読んでみてください。
・ただ前回までのままだとうまく動かず、一部だけに処理が反映されていました。
・今回はすべてのターゲットに処理を指定する方法について見ていきたいと思います。
・まずは今の状態ですがスクロールしていくと1つ目の画像と3つ目の画像が表示されるかと思います。
・理由は2つの要素を持つentrisがあるのですが今回の処理ではentries[0]にだけあっペアrクラスがついたからです。
・3つ目の画像は普通に表示されるのでそのへんの処理をスムーズにしていきましょう。
・つまりentriesは複数の要素を持つ配列で監視を開始したタイミングではすべてのターゲットが入っているのですが、交差したときは交差したターゲットだけが入っているのです。
・今回はすべてのターゲットに処理をしてappearクラスをつけたいのでコードを見ていきましょう。
処理の設定
・まずはif (!entries[0].isIntersecting) {になっているところをforEachにしてあげましょう。
・こんな感じですね
entries.forEach(entry => {
if (!entry[0].isIntersecting) {
return;
}
・次に今entry[0]になっているのでentryに書き換えて上げましょう。
・こんな感じですね。
entries.forEach(entry => {
if (!entry.isIntersecting) {
return;
}
entry.target.classList.add(‘appear’);
obs.unobserve(entry.target);
});
}
以上
