JavaScript IntersectionObserverで要素が画面内に入ってきたかを判定する

Question

IntersectionObserverについてです
要素が画面内に入ってきたかを判定するもので、
画面内に入っていたらstyle.background="red"としたいですが、
最初の実行で画面に入ってるdivタグ10個に対し、赤色にし、以後スクロールに応じて個別に赤色にしていきたいですが、

最初の実行で画面に入ってるdivタグ10個に対し、赤色がうまくいきません

現状のコードは下記になります
どのようにすれば実現可能でしょうか？

疑問点としてスクロールした際に取りこぼしのような事象も発生しています
スクロールに応じて赤くなっていく際に１個飛ばしで赤くなったりという点です
詳しい方教えて下さい

<style>
body,html{
height:100%;
}
</style>

<script>
let options = {
root:document.querySelector("#test"),
threshold:0,
rootMargin:"0px 0px -100% 0px"
}
window.onload=function(){
const observer = new IntersectionObserver((entries) => {
if(entries[0].isIntersecting){
document.getElementById(entries[0].target.id).style.background="red";
}
}, options);
a=document.querySelectorAll('.divdiv');
c=a.length-1;
for(i=0;i<=c;i++){
observer.observe(a[i]);
}
}
</script>
<div id="test">
<div id="aaaa1" class="divdiv" style="width:100%;height:10%">div</div>
<div id="aaaa2" class="divdiv" style="width:100%;height:10%">div</div>
<div id="aaaa3" class="divdiv" style="width:100%;height:10%">div</div>
<div id="aaaa4" class="divdiv" style="width:100%;height:10%">div</div>
<div id="aaaa5" class="divdiv" style="width:100%;height:10%">div</div>
<div id="aaaa6" class="divdiv" style="width:100%;height:10%">div</div>
<div id="aaaa7" class="divdiv" style="width:100%;height:10%">div</div>
<div id="aaaa8" class="divdiv" style="width:100%;height:10%">div</div>
<div id="aaaa9" class="divdiv" style="width:100%;height:10%">div</div>
<div id="aaaa10" class="divdiv" style="width:100%;height:10%">div</div>
<div id="aaaa11" class="divdiv" style="width:100%;height:10%">div</div>
<div id="aaaa12" class="divdiv" style="width:100%;height:10%">div</div>
<div id="aaaa13" class="divdiv" style="width:100%;height:10%">div</div>
<div id="aaaa14" class="divdiv" style="width:100%;height:10%">div</div>
<div id="aaaa15" class="divdiv" style="width:100%;height:10%">div</div>
<div id="aaaa16" class="divdiv" style="width:100%;height:10%">div</div>
<div id="aaaa17" class="divdiv" style="width:100%;height:10%">div</div>
<div id="aaaa18" class="divdiv" style="width:100%;height:10%">div</div>
<div id="aaaa19" class="divdiv" style="width:100%;height:10%">div</div>
<div id="aaaa20" class="divdiv" style="width:100%;height:10%">div</div>
<div id="aaaa21" class="divdiv" style="width:100%;height:10%">div</div>
<div id="aaaa22" class="divdiv" style="width:100%;height:10%">div</div>
<div id="aaaa23" class="divdiv" style="width:100%;height:10%">div</div>
<div id="aaaa24" class="divdiv" style="width:100%;height:10%">div</div>
<div id="aaaa25" class="divdiv" style="width:100%;height:10%">div</div>

Answer 1

要素が画面内に入ってきたかを判定する

現状だと #test との交差を判定しているので、オプションの指定は

let options = {
  threshold: 0,
}

でいいと思います。

また、なぜか entries の最初の要素しか処理の対象になっていないので、きちんとループして全ての対象に対して処理を行ってください。

const observer = new IntersectionObserver((entries) => {
  for (const entry of entries) {
    if (entry.isIntersecting) {
      entry.target.style.background = "red";
    }
  }
}, options);

isIntersecting は IntersectionObserverEntry のプロパティとなりますので、判定する場合 entry.isIntersecting を使用してください。

• entry : IntersectionObserverEntry
• entry.target : Element
• entry.target.id : DOMString

Comments

[zdww]

教えていただいたソースですと一瞬で全て赤になります
初回ロード時は全部赤でいいですが、スクロールした場合１個づつ赤にしていきたいのですが

<style>
body,html{
height:100%;
}
</style>

<script>
let options = {
root:document.querySelector("#test"),
threshold:0
}
window.onload=function(){
const observer = new IntersectionObserver((entries) => {
for (const entry of entries) {
entry.target.style.background = "red";
}
}, options);
a=document.querySelectorAll('.divdiv');
c=a.length-1;
for(i=0;i<=c;i++){
observer.observe(a[i]);
}
}
</script>
<div id="test" style="background:yellow;overflow-x: scroll;width:100%;height:100%">
<div id="aaaa1" class="divdiv" style="width:100%;height:10%">div</div>
<div id="aaaa2" class="divdiv" style="width:100%;height:10%">div</div>
<div id="aaaa3" class="divdiv" style="width:100%;height:10%">div</div>
<div id="aaaa4" class="divdiv" style="width:100%;height:10%">div</div>
<div id="aaaa5" class="divdiv" style="width:100%;height:10%">div</div>
<div id="aaaa6" class="divdiv" style="width:100%;height:10%">div</div>
<div id="aaaa7" class="divdiv" style="width:100%;height:10%">div</div>
<div id="aaaa8" class="divdiv" style="width:100%;height:10%">div</div>
<div id="aaaa9" class="divdiv" style="width:100%;height:10%">div</div>
<div id="aaaa10" class="divdiv" style="width:100%;height:10%">div</div>
<div id="aaaa11" class="divdiv" style="width:100%;height:10%">div</div>
<div id="aaaa12" class="divdiv" style="width:100%;height:10%">div</div>
<div id="aaaa13" class="divdiv" style="width:100%;height:10%">div</div>
<div id="aaaa14" class="divdiv" style="width:100%;height:10%">div</div>
<div id="aaaa15" class="divdiv" style="width:100%;height:10%">div</div>
<div id="aaaa16" class="divdiv" style="width:100%;height:10%">div</div>
<div id="aaaa17" class="divdiv" style="width:100%;height:10%">div</div>
<div id="aaaa18" class="divdiv" style="width:100%;height:10%">div</div>
<div id="aaaa19" class="divdiv" style="width:100%;height:10%">div</div>
<div id="aaaa20" class="divdiv" style="width:100%;height:10%">div</div>
<div id="aaaa21" class="divdiv" style="width:100%;height:10%">div</div>
<div id="aaaa22" class="divdiv" style="width:100%;height:10%">div</div>
<div id="aaaa23" class="divdiv" style="width:100%;height:10%">div</div>
<div id="aaaa24" class="divdiv" style="width:100%;height:10%">div</div>
<div id="aaaa25" class="divdiv" style="width:100%;height:10%">div</div></div>

[退会済みユーザー]

ループ内で `isIntersecting` の判定をしてください。

[zdww]

こういうことでしょうか？
動きませんでした

for (const entry of entries) {
if(entry.target.isIntersecting){
entry.target.style.background = "red";
}
}

[zdww]

やはり動きません

const observer = new IntersectionObserver((entries) => {
for (const entry of entries) {

if(entry.target.id.isIntersecting){
document.getElementById(entry.target.id).style.background = "red";
}
}

[退会済みユーザー]

回答追記しましたので参考にしてください。

[zdww]

助かりました。ありがとうございました。
あと
observer.observe(a[i]);
で追加されたものを個別に削除するにはどうしたらいいかご存知でしょうか？

[退会済みユーザー]

`unobserve` を使用してください（参考：https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserver/unobserve）。うまく行かないようならこのスレッドの内容とズレるので新しい質問を作成してください。