IntersectionObserverでスクロールの方向を判定して処理を切り替えたい時
目次（読みたい所をクリック!!）
rootMarginの上下の値を指定すればOK
結論、上から下にスクロールした時のみ交差判定をしたい場合はrootMarginの上の値になるべく大きい値を入れる
インスタンスを2回呼び出す必要がありますが下記4通りの判定が可能です
- ターゲットが下から画面内に表示
- ターゲットが画面内から下に非表示
- ターゲットが上から画面内に表示
- ターゲットが画面内から上に非表示
const intersectionObserver1 = new IntersectionObserver((entries) => {
if (entries[0].isIntersecting) {
//ターゲットが下から画面内に表示
} else {
//ターゲットが画面内から下に非表示
}
}, {
//上 右 下 左
rootMargin: '1000000% 0px 0px 0px',
});
intersectionObserver1.observe(document.querySelector("#target"));
const intersectionObserver2 = new IntersectionObserver((entries) => {
if (entries[0].isIntersecting) {
//ターゲットが上から画面内に表示
} else {
//ターゲットが画面内から上に非表示
}
}, {
//上 右 下 左
rootMargin: '0px 0px 1000000% 0px',
});
intersectionObserver2.observe(document.querySelector("#target"));
解説
rootMarginを使用すれば交差判定を拡大することが可能です
したがって上方向へ交差判定を拡げることで下へスクロールした際にターゲットとなる要素が画面から外れても交差している状態を維持することができます
スクロールでフェードインするアニメーションにも使える
IntersectionObserverを使用してスクロールでフェードインするアニメーションを実装したい時、通常であれば下にスクロールしたときだけでなく、上にスクロールで戻った際もアニメーションが発火してしまいます
rootMarginを使えば下にスクロールしたときのみアニメーションを発火させることが可能になります
const intersectionObserver1 = new IntersectionObserver((entries) => {
if (entries[0].isIntersecting) {
document.querySelector("#target").classList.add('active')
} else {
document.querySelector("#target").classList.remove('active')
}
}, {
//上 右 下 左
rootMargin: '1000000% 0px 0px 0px',
});
intersectionObserver1.observe(document.querySelector("#target"));