序文要素がビューポート内にあるかどうかを監視する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 は、ターゲット要素と祖先要素またはビューポートとの交差点の変更を非同期的に検出する方法を提供します。設定されたコールバック関数は、ターゲット要素がビューポートまたは他の指定された要素と交差したときにトリガーされます。 // 監視する要素を取得します 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 システムでのルーティング構成の詳細な説明
新しいプロジェクトを始めるこの記事では主に、新規プロジェクトを0から1まで取り組むプロセスを記録し、...
この記事では、USBバーコードスキャナデータを取得するjsの具体的なプロセスを参考までに紹介します。...
ウェブサイトにとって、これは最も基本的な機能です。それでは、登録プロセスに含まれる手順を見てみましょ...
ゼロ: 古いバージョンをアンインストールするDocker の古いバージョンは、docker、dock...
1. スクロールスナップはフロントエンド開発者にとって必須のスキルですCSS スクロール スナップは...
imgタグは画像を導入しますreactは実際にはjsリーダー関数を介してページをレンダリングするため...
Yum (フルネームは Yellow dog Updater, Modified) は、Fedora...
この記事の例では、ログインと登録機能を実装するためのjsの具体的なコードを参考までに共有しています。...
1. 基礎知識: HTTP ヘッダー ユーザーエージェントユーザー エージェントは、ユーザー エージ...
目次背景技術的ソリューション具体的な実装要約する背景Element UI は、PC で人気の Vue...
この記事では、WeChatアプレットの具体的なコードを共有し、簡単なチャットルームを実装します。具体...
プロジェクトをプロジェクトサイトのテスト環境にデプロイするJDK1.8トムキャット8.5 Maven...
会社のビジネス要件により、次の図の赤い領域の効果を達成する必要があります。 効果の説明: 1. 赤い...
目次1. JavaScriptを記述する場所2. JavaScriptでよく使われる入力文と出力文1...
前回の記事でMySQLサービスが起動しない問題が解決したと分かった後、パスワードなしでrootユーザ...