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

序文

要素がビューポート内にあるかどうかを監視する2つの方法を共有する

1. 位置計算

Element.getBoundingClientRect() メソッドを使用して、ビューポートに対する要素の位置を返します。

定数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
  ）{
    偽を返す
  }

  真を返す
}

getBoundingClientRect メソッドを使用すると、ブラウザがリフローして再描画されるため、パフォーマンスが若干低下しますが、Intersection Observer よりも互換性が高くなります。

2. 交差点オブザーバー

Intersection Observer API は、ターゲット要素と祖先要素または最上位ドキュメントのビューポートとの交差における変更を非同期的に監視する方法を提供します。

Intersection Observer API は、ターゲット要素と祖先要素またはビューポートとの交差点の変更を非同期的に検出する方法を提供します。設定されたコールバック関数は、ターゲット要素がビューポートまたは他の指定された要素と交差したときにトリガーされます。

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

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

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

参照する

要素がビューポート内にあるかどうかを確認する方法 4bcl

交差点オブザーバー API

要約する

これで、JS を使用して要素がビューポート内にあるかどうかを確認する方法についての記事は終了です。JS を使用して要素がビューポート内にあるかどうかを確認する方法の詳細については、123WORDPRESS.COM の以前の記事を検索するか、次の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

<<: MySQL で準備、実行、割り当て解除ステートメントを使用するチュートリアル

>>: 複数のネットワークカードを備えた Linux システムでのルーティング構成の詳細な説明