jqueryで要素が表示領域内にあるかどうかを判断する方法

Web ページを開発するとき、DOM 要素を操作する必要があることがよくあります。要素を操作するには、まず要素が表示領域内にあるかどうかを判断する必要があります。 Web ページでは、多くの要素が表示領域内に隠れて隠れている場合があるため、不要な要素の操作を避け、ページのパフォーマンスを向上させるために、これらの要素を操作する前に、それらの要素が表示領域内にあるかどうかを判断する必要があります。

jQuery は、要素が表示領域内にあるかどうかを判断するためのメソッドをいくつか提供します。以下では、ビューポートやドキュメント、要素による判断方法も含めて詳しく紹介します。

ビューポートによる判定方法

Webページでは、要素が表示領域内にあるかどうかをビューポート(Viewport)を使って判定することができます。ビューポートは、ユーザーに現在表示されているページの領域であり、ウィンドウ オブジェクトのプロパティを通じて取得できます。

jQuery には、要素がビューポート内にあるかどうかを判断するためのメソッドがいくつか用意されています。

1. $(window).height(): 現在のビューポートの高さを取得します。
2. $(window).scrollTop(): 現在のビューポートの上部とドキュメントの上部の間の距離 (つまり、スクロール バーがスクロールする距離) を取得します。

上記の 2 つの方法により、現在のビューポートの上部の位置と下部の位置を取得できます。要素の場合、その上部の位置が現在のビューポートの下部の位置より小さく、下部の位置が現在のビューポートの上部の位置より大きい場合、その要素は表示領域内にあります。

上記の原則に基づいて、コードを使用して要素がビューポート内にあるかどうかを判断する関数を実装できます。

function isInViewport(elem) {
    var elemTop = elem.offset().top;
    var elemBottom = elemTop + elem.height();
    var viewportTop = $(window).scrollTop();
    var viewportBottom = viewportTop + $(window).height();
    return elemTop < viewportBottom && elemBottom > viewportTop;
}

// 使用方式
var element = $('#my-element');
if (isInViewport(element)) {
    // 元素在视口内
} else {
    // 元素不在视口内
}

上記のコードでは、 isInViewport() 関数は jQuery を受け取ります。要素オブジェクトを取得し、要素の位置を取得します。ページ内の位置と現在のビューポートの位置により、要素が表示領域内にあるかどうかが判断され、ブール値が返されます。

ドキュメントベースの判定方法

ページの内容がビューポートのサイズを超えると、ビューポートのサイズがページの内容を正確に反映しなくなります。要素はドキュメントに基づいて表示領域にあります。文書ベースの判定方法では、要素が文書の可視領域内にあるかどうかを判断するために、文書の上部からの要素の距離と文書の高さを取得する必要があります。

jQuery には、ドキュメント内の要素の位置とドキュメントの高さを取得する次のメソッドが用意されています。

1. $(document).height(): 高さを取得します。文書。
2. elem.offset().top: ドキュメントの上部からの相対的な要素の距離を取得します。

上記の 2 つのメソッドを使用すると、要素の上部の位置とドキュメントの高さを取得して、要素がドキュメントの表示領域内にあるかどうかを判断できます。以下は、要素がドキュメントの表示領域内にあるかどうかを判断する関数です。

function isElementInDocumentViewport(elem) {
    var elemTop = elem.offset().top;
    var elemBottom = elemTop + elem.height();
    var docViewTop = $(window).scrollTop();
    var docViewBottom = docViewTop + $(window).height();
    var docHeight = $(document).height();
    return elemTop < docViewBottom && elemBottom > docViewTop && elemTop > 0 && elemBottom < docHeight;
}

// 使用方式
var element = $(&#39;#my-element&#39;);
if (isElementInDocumentViewport(element)) {
    // 元素在可视区域内
} else {
    // 元素不在可视区域内
}

上記のコードでは、 isElementInDocumentViewport() 関数は、要素がドキュメントの表示領域内にあるかどうかを判断します。ドキュメントと関数はブール値を返します。 elemTop と elemBottom はそれぞれ、ドキュメントの上部を基準とした要素の上部と下部の間の距離を表し、docViewTop と docViewBottom はそれぞれ、ビューポートの上部を基準としたドキュメントの上部と下部の間の距離を表し、docHeight は書類の高さ。

要素ベースの判定方法

要素が表示領域内にあるかどうかを判定する際、ある親要素内の状況のみを考慮する場合があります。このとき、要素ベースの判定方法を使用して、親要素の高さとスクロールバーの位置を取得し、その要素が親要素の表示領域内にあるかどうかを判断できます。

次は、要素が親要素の表示領域内にあるかどうかを判断する関数です:

function isElementInElementViewport(elem, parentElem) {
    var elemTop = elem.offset().top - parentElem.offset().top;
    var elemBottom = elemTop + elem.height();
    var parentViewTop = parentElem.scrollTop();
    var parentViewBottom = parentViewTop + parentElem.height();
    var parentHeight = parentElem.height();
    return elemTop < parentViewBottom && elemBottom > parentViewTop && elemTop > 0 && elemBottom < parentHeight;
}

// 使用方式
var element = $('#my-element');
var parentElement = $('#my-parent-element');
if (isElementInElementViewport(element, parentElement)) {
    // 元素在父元素可视区域内
} else {
    // 元素不在父元素可视区域内
}

上記のコードでは、isElementInElementViewport() 関数は 2 つの jQuery を受け取ります。決定する必要がある要素オブジェクト、要素とその親要素。この関数はブール値を返します。 elemTop と elemBottom はそれぞれ、親要素の上部を基準とした要素の上部と下部の間の距離を表します。parentViewTop とparentViewBottom はそれぞれ、スクロール バーの上部を基準とした親要素の上部と下部の間の距離を表します。親要素の高さを表します。

結論

Web開発において、要素が表示領域内にあるかどうかを判断することは基本的かつ重要な機能です。 jQuery を使用して DOM 要素を操作する場合、jQuery が提供するメソッドを使用して、要素がビューポート、ドキュメント、または親要素の表示領域内にあるかどうかを判断できます。これらの方法を合理的に使用することで、ページのパフォーマンスを向上させ、不要な操作を回避できます。

以上がjqueryで要素が表示領域内にあるかどうかを判断する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。