画面内に入ったり出たりした時の処理を行う「Intersection Observer」について

先日、超速! Webページ速度改善ガイド ── 使いやすさは「速さ」から始まる (WEB+DB PRESS plus)という本を読んで知ったのですが、最近のWebブラウザのJavaScriptには、「Intersection Observer」というAPIがあるらしく、このAPIを使うことで画面内に入ったか(もしくは画面外に出たか)どうかを判定できるそうです。

便利そうなので、試しに使ってみました。画面に四角い要素を100個並べて、画面に入ったり出たりすることで背景色が変わるサンプルです。試しに、今まで知ってはいたけど使ったことがないCSSアニメーションや、ES6から実装されたletやconstやアロー関数も使っています。

HTML

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Intesection Observeテスト</title>
    <link rel="stylesheet" href="intersectionObserve.css">
    <script src="intersectionObserve.js" defer></script>
</head>
<body>
    <div id="main"></div>    
</body>
</html>

CSS

#main > div{
    float:left;
    width:100px;
    height:100px;
    margin-right:10px;
    margin-bottom:10px;
    background-color:#4169e1;
    text-align:center;
    line-height:100px;
    color:white;
    transition: background 1s linear, color 1s linear; /* 1秒書けて背景色と文字色を変化 */
}
/* 画面内に入った時用のクラス */
#main > div.in{
    background-color:orange;
    color:black;
}

JavaScript

const main = document.getElementById('main');

//Intersection Observerの使用
const observer = new IntersectionObserver(entries => {
    console.log(entries);
    for(const entry of entries){
        const item = entry.target;
        //要素に入ってるか、入ってないかの特定
        if(entry.intersectionRatio > 0){ //要素内
            item.classList.add('in');
        }else{ //要素外
            item.classList.remove('in');
        }
    }
})

//要素作成
for(let i = 0; i < 100; i++){
    const newDiv = document.createElement('div');
    newDiv.innerHTML = i;
    main.appendChild(newDiv);
    observer.observe(newDiv);
}

サンプル：Intesection Observeテスト

スクロールしたり画面サイズを変更したりすることで、四角い要素が画面内に入ると、背景色が1秒かけて青からオレンジに変わると思います(IE以外の最新ブラウザ対応)。

ただ、すばやくスクロールしているとたまにうまく動作しないことがあるみたいです。あまりアテにしすぎるのもよくないのかも(自分がよく分かってない可能性もおおいにあります)。

なお、IntersectionObserverの第2引数にはどの要素の交差を判定するか(なければブラウザのビューポート)のrootと、ルート回りの余白を指定できるrootMargin、それと可視性がどれぐらい入ってるか出ているかでコールバックを実行するthresholdというオプションがあるそうです。
参考：Intersection Observer API - Web API インターフェイス | MDN