JS IntersectionObserver

Question

IntersectionObserverを使い要素の考査の監視をおこなっています
コード1だとページ読み込み時にa1がyellowになりますが
コード2だとyellowになりません
それはなぜでしょうか
コード2でページ読み込み時にa1をyellowにしない方法はありますでしょうか？

コード1

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

<div id="aaa" style="height:100%;overflow:scroll">
<div id="a1" class="a" style="height:20%;background:red"></div>
<div id="a2" class="a" style="height:20%;background:red"></div>
<div id="a3" class="a" style="height:20%;background:red"></div>
<div id="a4" class="a" style="height:20%;background:red"></div>
<div id="a5" class="a" style="height:20%;background:red"></div>
<div id="a6" class="a" style="height:20%;background:red"></div>
<div id="a7" class="a" style="height:20%;background:red"></div>
<div id="a8" class="a" style="height:20%;background:red"></div>
<div id="a9" class="a" style="height:20%;background:red"></div>
<div id="a10" class="a" style="height:20%;background:red"></div>

</div>



<script>
window.onload=function(){


 let options = {
        root: document.querySelector("#aaa"),
rootMargin: '0px 0px 0px 0px',
        threshold: 1
      }

      const observer = new IntersectionObserver((entries) => {
tid=entries[0].target.id;
        if (entries[0].intersectionRatio != 1) {
}else{
document.getElementById(tid).style.background="yellow";
}
      }, options);


      s = document.querySelectorAll('.a');
      sl = s.length;
      for (i = 0; i < sl; i++) {
        observer.observe(s[i]);
      }
}
</script>

コード2

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

<div id="aaa" style="height:100%;overflow:scroll">
<div id="a1" class="a" style="height:20%;background:red"></div>
<div id="a2" class="a" style="height:20%;background:red"></div>
<div id="a3" class="a" style="height:20%;background:red"></div>
<div id="a4" class="a" style="height:20%;background:red"></div>
<div id="a5" class="a" style="height:20%;background:red"></div>
<div id="a6" class="a" style="height:20%;background:red"></div>
<div id="a7" class="a" style="height:20%;background:red"></div>
<div id="a8" class="a" style="height:20%;background:red"></div>
<div id="a9" class="a" style="height:20%;background:red"></div>
<div id="a10" class="a" style="height:20%;background:red"></div>

</div>



<script>
window.onload=function(){


 let options = {
        root: document.querySelector("#aaa"),
rootMargin: '0px 0px 0px 0px',
        threshold: 1
      }

      const observer = new IntersectionObserver((entries) => {
tid=entries[0].target.id;
        if (entries[0].intersectionRatio != 1) {
document.getElementById(tid).style.background="yellow";
}
      }, options);


      s = document.querySelectorAll('.a');
      sl = s.length;
      for (i = 0; i < sl; i++) {
        observer.observe(s[i]);
      }
}
</script>

Comments

[Lhankor_Mhy]

「コード2でページ読み込み時にa1をyellowにしない方法はありますでしょうか？ 」とのことですが、これは「コード1で」という意味ですか？

当方で試したところ、コード2はページ読み込み時にa1がyellowになりませんでした。

Answer 1

コード2でページ読み込み時にa1をyellowにしない方法はありますでしょうか？

コード1でページ読み込み時にa1をyellowにしない方法だという推測で回答します。

スクロールイベントを検知してから監視を開始すればいいのではないかと思いました。

            observer.root.addEventListener('scroll', e => {
                s = document.querySelectorAll('.a');
                sl = s.length;
                for (i = 0; i < sl; i++) {
                    observer.observe(s[i]);
                }
            }, { once: true })