Step By Work

大阪のホームページ制作会社

IntersectionObserverでスクロールの方向を判定して処理を切り替えたい時

Date: 2024.05.01
Update: 2024.05.04

執筆・監修

上杉 洋 Hiroshi Uesugi

1991年生まれ。 株式会社ステップバイワーク代表。 2013年に株式会社n.uを設立。 2015年にStep by workとして独立。 2021年株式会社ステップバイワークとして法人化。 HP制作/SEO対策/コンテンツ制作/動画制作/YouTube運用/写真撮/WordPressを全て一人でやります。

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"));

この記事へのコメント 0件