JavascriptのIntersectionObserverについて

はじめに

この投稿は解説などではなく、忘れないためのメモ的な感覚で投稿いたします。
見て頂く方々に関しましては、私の解釈が間違っていたりベストな情報ではない可能性が高いので、そのつもりで閲覧していただければと思います。
加えて、そのようなことがあればコメントしていただけると大変助かります。

IntersectionObserverとは

HTMLの要素とウィンドウの交差を監視している。
使い方は、newで作成したIntersectionObserverのインスタンスにコールバック関数を渡してておく。それの.observeメソッドの引数に監視対象を入れることで、交差したときにコールバック関数が発火する。
後々のためにインスタンスはconstで定義する。

//監視したいDOMを定義
const dom = docment.querySelector('監視したいDOM');

//newでインスタンスを作ってio(変数名は何でもいいが略語のioにしておく)として定義する
const io = new IntersectionObserver(cb);

//コールバックで実行したい関数を定義する
const cb = function (){
例)alert("内");
};

//定義したDOMを.observeメソッドの引数いれる
io.observe(dom);

監視対象が複数の場合

コールバック関数にはentriesとobserveの2つオブジェクトを引数にとることができる。
下のように監視対象が増えた場合、forEachでそれぞれを監視することができる。
一度監視に入ったあとは監視をしないようにしたい場合はovserveのunobsereveにentry.targrtを入れる。ここでとってくるentry.targrtはdomだったりdom1だったりの各監視対象のこと。

const cb = function(entries,observe){
    entries.forEach(e =>{
        if(entries.isIntersectiong){
            console.log("内");
            //observe.unobserve(e.target);
        } else{
            console.log("外");
        }
});

io.observe(dom);
io.observe(dom1);
io.observe(dom2);

オプション

const options = {
//交差対象にしたい要素を設定できる（親要素だったり先祖要素）
//実際はあまり変更しないとか、、、
    root:null;

//交差点を調整できる-の値で交差点を画面の内側に広げることができる。値必ずpxで
    rootMargin: -300px 0px 0px -300px;
//デフォルト値は0、0～1の値をとり、入る側を0、出る側を1として、監視対象の交差点を調節できる。
//[0, .5, 1]とすることで、三か所で発火させることができる
    threshold: .5;
}