JavaScript上級者の方IntersectionObserverについて教えて下さい

Question

IntersectionObserverを使いスクロールしたら画面内に画像が入ったらイベントを起こすようなものを作ってます
通常bodyにあたるものだと思いますが、div領域(id obj)にIntersectionObserverをあてるにはどうしたらいいのでしょうか？
詳しい方お願いいたします

<style>
#space {
background-color:aqua;
height:130vh;
}
</style>

<div id="obj" style="width:300px;height:300px;overflow-y:scroll;overflow-x: hidden;-webkit-overflow-scrolling: touch;">
<img class="target" src="https://lohas.nicoseiga.jp/thumb/2716331i?">

<div id="space"></div>

<img class="target" src="https://lohas.nicoseiga.jp/thumb/2716331i?">

<div id="space"></div>

<img class="target" src="https://lohas.nicoseiga.jp/thumb/2716331i?">
</div>

<script>
var options = {
threshold:1
};

a=document.querySelectorAll('.target');
c=a.length-1;

const observer = new IntersectionObserver((entries) => {

if (entries[0].intersectionRatio != 0) {
    alert(entries[0]);
}
}, options);

for(i=0;i<=c;i++){
    observer.observe(a[i]);
}
</script>

Answer 1

rootを指定してください。

var options = {
  threshold: 1,
  root: document.querySelector('#obj')
};

https://w3c.github.io/IntersectionObserver/#dom-intersectionobserverinit-root

Comments

[退会済みユーザー]

ご指摘の通り記述しましたが動作しませんでした
何か間違いがありますでしょうか？

<style>
#space {
background-color:aqua;
height:130vh;
}
</style>

<script>
var options = {
threshold:1
root: document.querySelector('#obj');
};

a=document.querySelectorAll('.target');
c=a.length-1;

const observer = new IntersectionObserver((entries) => {

if (entries[0].intersectionRatio != 0) {
alert(entries[0]);
}
}, options);

for(i=0;i<=c;i++){
observer.observe(a[i]);
}
</script>

<div id="obj" style="width:300px;height:300px;overflow-y:scroll;overflow-x: hidden;-webkit-overflow-scrolling: touch;">
<img class="target" src="https://lohas.nicoseiga.jp/thumb/2716331i?">

<div id="space"></div>

<img class="target" src="https://lohas.nicoseiga.jp/thumb/2716331i?">

<div id="space"></div>

<img class="target" src="https://lohas.nicoseiga.jp/thumb/2716331i?">
</div>

[int32_t]

<script>を<div id="obj">の終了タグより後に置いてください。

[退会済みユーザー]

やはり動かないようです
動いてるかどうかの確認はスクロールしてアラートが実行されるかどうかで見ておりますが、
アラートは一切表示されません

<style>
#space {
background-color:aqua;
height:130vh;
}
</style>

<div id="obj" style="width:300px;height:300px;overflow-y:scroll;overflow-x: hidden;-webkit-overflow-scrolling: touch;">
<img class="target" src="https://lohas.nicoseiga.jp/thumb/2716331i?">

<div id="space"></div>

<img class="target" src="https://lohas.nicoseiga.jp/thumb/2716331i?">

<div id="space"></div>

<img class="target" src="https://lohas.nicoseiga.jp/thumb/2716331i?">
</div>

<script>
var options = {
threshold:1
root: document.querySelector('#obj')
};

a=document.querySelectorAll('.target');
c=a.length-1;

const observer = new IntersectionObserver((entries) => {

if (entries[0].intersectionRatio != 0) {
alert(entries[0]);
}
}, options);

for(i=0;i<=c;i++){
observer.observe(a[i]);
}
</script>

[退会済みユーザー]

Uncaught SyntaxError: missing } after property list
とエラーも出ています

[退会済みユーザー]

,が抜けてました
下記にしたところ、エラーは出なくなりましたが、
3か所のclass="target"の場所でスクロールしてもアラートは出ません

var options = {
root:document.querySelector("#obj"),
threshold:1
}

[退会済みユーザー]

divのサイズをwidth:1200px;height:1200pxにしたところ動き出しました
不可思議ではありますが、これにて解決とします
ありがとうございます

Answer 2

特定の枠内でIntersectionObserverを使うならiframeを使うのが妥当