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

推薦する

div を下から上にスライドさせる CSS3 の例

1. まず、CSS3 のターゲット セレクターを使用し、a タグを使用して id セレクターを指定し...

JavaScript で二分探索木を実装する

JavaScriptでの検索二分木実装は参考までに。具体的な内容は以下のとおりです。バイナリ検索木 ...

Docker デプロイメントサービスの落とし穴を登る過程の詳細

初めて書きます。自己紹介させてください...みなさんこんにちは。私はジャスミンです。なぜジャスミンと...

Nginx レベルで基本的なユーザー認証を構成する手順を完了します。

序文アプリケーション シナリオ: おそらく、内部 Web サイトは外部ユーザーにアクセス可能である必...

PrometheusとGrafanaを使用したMySQLサーバーのパフォーマンス監視の詳細な説明

概要Prometheus は、HTTP プロトコルを介してリモート マシンからデータを収集し、ローカ...

Vue ページ スタック マネージャーの詳細

目次2. 試した方法2.1 キープアライブ2.2 ネストされたルートを持つ CSS 3. 機能説明4...

Javascript と Vue を組み合わせて、あらゆる迷路画像の自動パス検索を実現します。

目次序文2次元配列、一方向基本インターフェースのマッピング幅優先、包括的検索マップ編集経路探索アルゴ...

MySQLのパラメータについてお話しましょう

序文:以前の記事では、特定のパラメータの機能についてよく紹介してきました。しかし、MySQL パラメ...

MySQLフィールドのデフォルト値を設定する方法

目次序文: 1. デフォルト値に関する操作2. 使用上の提案要約:序文: MySQL では、テーブル...

iframeフレームはIEブラウザで白い背景を透明に設定します

最近、プロジェクトを進める過程で、ページの階層構造を描画するために iframe を頻繁に使用する必...

uniappのグローバル変数実装の詳細な説明

序文この記事では、uniapp グローバル変数の実装方法をいくつかまとめています。詳細な知識は、uV...

docker.service 起動エラーの詳細なトラブルシューティング

エラーを報告するには次のコマンドを実行しますsystemctl dockerを再起動しますエラーメッ...

HTML 基本要約推奨事項 (タイトル)

HTML: タイトル見出しは <h1> - <h6> などのタグによって定...

Nginx で Basic Auth ログイン認証を設定する方法

nginx でファイルサーバーを構築することもありますが、これは一般に公開されていますが、サーバーが...

同じページを動的にロードするための Vue ルーティングリスニングの例

目次シナリオ分析発達要約するシナリオ分析システムでは、1 つのモジュールに 3 つのサブモジュールが...