JS を使用して要素がビューポート内にあるかどうかを確認する方法

定数isElementVisible = (el) => {
 定数 rect = el.getBoundingClientRect();
};

定数isElementVisible = (el) => {
 定数 rect = el.getBoundingClientRect();
  const vWidth = window.innerWidth || document.documentElement.clientWidth;
  const vHeight = window.innerHeight || document.documentElement.clientHeight;
};

定数isElementVisible = (el) => {
  const rect = el.getBoundingClientRect()
  定数 vWidth = window.innerWidth || document.documentElement.clientWidth
  定数 vHeight = window.innerHeight || document.documentElement.clientHeight

  
  もし （
    rect.right < 0 ||
    矩形下端 < 0 ||
    rect.left > vWidth ||
    rect.top > vHeight
  ）{
    偽を返す
  }

  真を返す
}

// 監視する要素を取得します const boxs = document.querySelectorAll('.box')

// オブザーバーを作成し、コールバック関数を設定します // isIntersecting プロパティを使用して、要素がビューポートと交差するかどうかを判断します const observer = new IntersectionObserver((entries, observer) => {
 エントリ.forEach((エントリ) => {
    コンソール.log(
      エントリ.ターゲット、
      entry.isIntersecting?「表示」:「非表示」
    );
  });
})

ボックス.forEach((ボックス) => {
  オブザーバー.observe(ボックス);
});