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

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 システムでのルーティング構成の詳細な説明

推薦する

Reactプロジェクトの新規作成からデプロイまでの実装例

新しいプロジェクトを始めるこの記事では主に、新規プロジェクトを0から1まで取り組むプロセスを記録し、...

js を使用して USB スキャナー データを取得する方法

この記事では、USBバーコードスキャナデータを取得するjsの具体的なプロセスを参考までに紹介します。...

優れた登録プロセスの手順

ウェブサイトにとって、これは最も基本的な機能です。それでは、登録プロセスに含まれる手順を見てみましょ...

ubuntu20.04 LTSにdockerをインストールする方法

ゼロ: 古いバージョンをアンインストールするDocker の古いバージョンは、docker、dock...

CSS scroll-snap スクロールイベント停止と要素位置検出の実装

1. スクロールスナップはフロントエンド開発者にとって必須のスキルですCSS スクロール スナップは...

Reactプロジェクトで画像を導入するいくつかの方法

imgタグは画像を導入しますreactは実際にはjsリーダー関数を介してページをレンダリングするため...

CentOSにPHP+Apache+MySQLのサーバー環境をインストールして構築する

Yum (フルネームは Yellow dog Updater, Modified) は、Fedora...

ログインと登録機能を実現するjs

この記事の例では、ログインと登録機能を実装するためのjsの具体的なコードを参考までに共有しています。...

一般的なブラウザのユーザーエージェントの概要

1. 基礎知識: HTTP ヘッダー ユーザーエージェントユーザー エージェントは、ユーザー エージ...

vueはel-tableの列幅の適応を完璧に実現します

目次背景技術的ソリューション具体的な実装要約する背景Element UI は、PC で人気の Vue...

WeChatアプレットはシンプルなチャットルームを実装します

この記事では、WeChatアプレットの具体的なコードを共有し、簡単なチャットルームを実装します。具体...

Linux 上でプロジェクトをリリースするために Tomcat を展開するプロセスにおけるさまざまな問題と解決策

プロジェクトをプロジェクトサイトのテスト環境にデプロイするJDK1.8トムキャット8.5 Maven...

CSS を使用して複数の方法で下揃えを実装するサンプル コード

会社のビジネス要件により、次の図の赤い領域の効果を達成する必要があります。 効果の説明: 1. 赤い...

JavaScriptの基礎を学ぶ

目次1. JavaScriptを記述する場所2. JavaScriptでよく使われる入力文と出力文1...

MySQL 5.7 のルートパスワードログイン問題の解決策

前回の記事でMySQLサービスが起動しない問題が解決したと分かった後、パスワードなしでrootユーザ...