jQueryを使用してDiv要素がビューポートに表示されているかどうかを確認するにはどうすればよいですか?

jQuery を使用したビューポートでの要素の可視性の確認

このトラブルシューティング シナリオの目標は、クラス「media」を持つ div 要素が存在するかどうかを確認することです。 " は、スクロール位置に関係なく、ブラウザの表示ビューポート内に表示されます。 jQuery 表示プラグインが潜在的な解決策として特定されていますが、その実装はまだ不明です。

この問題を解決するには、カスタム jQuery 関数を使用して、ビューポート内での要素の可視性を決定できます。

$.fn.isInViewport = function() {
  var elementTop = $(this).offset().top;
  var elementBottom = elementTop + $(this).outerHeight();

  var viewportTop = $(window).scrollTop();
  var viewportBottom = viewportTop + $(window).height();

  return elementBottom > viewportTop && elementTop < viewportBottom;
};

この関数は、上下の境界を考慮して、ビューポートに対する要素の位置を計算します。これらの境界をビューポートの境界と比較することで、要素が部分的に表示されるか完全に表示されるかを判断します。

これを実装するには、jQuery の後に関数を組み込み、次のように使用します。

$(window).on('resize scroll', function() {
  if ($('#Something').isInViewport()) {
    // Element is visible in viewport
  } else {
    // Element is not visible in viewport
  }
});

ウィンドウのサイズが変更またはスクロールされると、このコードは ID「Something」を持つ要素が表示されているかどうかをチェックします。そうである場合、エフェクトのトリガーや外観の更新など、指定されたアクションが実行されます。

この関数は、要素の水平方向の配置が適切であることを前提として、要素の垂直位置のみをチェックすることに注意することが重要です。 。水平方向と垂直方向の両方の可視性を考慮する必要がある場合は、要素の幅とビューポートの水平境界を考慮する追加のロジックが必要になります。

以上がjQueryを使用してDiv要素がビューポートに表示されているかどうかを確認するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。