後輩が「いい感じのWebページとか色々整えた上で配信者としてデビューしたい」みたいなことを言い出し、いい感じのWebページについて聞いたところ、○○ぎり高校みたいなのがいいとか言い出したので、色々見てみたらIntersection Observerが必須くさかったので、軽く勉強してみることにした

泡沫京水

Intersection Observerってなんだよ

スクロールしたときにそのHTML要素が画面上に入ってきたときの動作を操るためのブラウザに組み込まれているAPI。
これを使うことによって

コードがわかりやすくなる
スクロールイベントからどうこうするよりパフォーマンスは上がる

でいいことづくめなので使っていく。

泡沫京水

Intersection Observerってどう使うの？

細々とした設定をしない場合

単一のとき

IntersectionObserverのインスタンスを作る

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

そうしたら、どの要素が画面上に表示されたらインスタンス作成時に設定した関数を実行するかを指定する

observer.observe(document.getElementById("heading"))

複数あるとき

const headings = document.querySelectorAll(".heading")

const observer = new IntersectionObserver((entries) => {
    entries.forEach(entry => {
        if(entry.isIntersecting){
            entry.target.classList.add("active")
        }
    })
})

headings.forEach(heading => {
    observer.observe(heading)
})

泡沫京水

これに全部書いてあった

泡沫京水