web-dev-qa-db-ja.com

ビューポートで要素が表示されているかどうかのJQueryチェック

ウィンドウのスクロール位置に関係なく、divクラス「media」がブラウザのビジュアルビューポート内にあるかどうかを確認する機能。

<HTML>
<HEAD>
  <TITLE>My first HTML document</TITLE>
</HEAD>
<BODY>
  <div class="main">
   <div class="media"></div>
  </div>

</BODY>
</HTML>

このプラグインを使用しようとしています https://github.com/customd/jquery-visible この関数を使用していますが、機能させる方法がわかりません。

$('#element').visible( true );
javascriptjqueryvisible
75
Vim Bonsu

さて、どのようにそれを機能させようとしましたか？そのプラグインのドキュメントによると、.visible()は、要素が表示されているかどうかを示すブール値を返します。したがって、次のように使用します。

if ($('#element').visible(true)) {
    // The element is visible, do something
} else {
    // The element is NOT visible, do something else
}
49
David

jquery：を使用して、要素がビューポートに表示されるかどうかを確認します

まず、要素の上部と下部の位置を決定します。次に、スクロール位置をビューポートの高さに追加して、ビューポートの下部の位置（ページの上部に対する位置）を決定します。

ビューポートの下部の位置が要素の上部の位置よりも大きく、ビューポートの上部の位置が要素の下部の位置よりも小さい場合、要素はビューポート内にあります（少なくとも部分的に）。簡単に言えば、要素の一部がビューポートの上下の境界の間にある場合、要素は画面に表示されます。

これでif/elseステートメントを記述できます。ifステートメントは、上記の条件が満たされた場合にのみ実行されます。

以下のコードは、上記で説明した内容を実行します。

// this function runs every time you are scrolling

$(window).scroll(function() {
    var top_of_element = $("#element").offset().top;
    var bottom_of_element = $("#element").offset().top + $("#element").outerHeight();
    var bottom_of_screen = $(window).scrollTop() + $(window).innerHeight();
    var top_of_screen = $(window).scrollTop();

    if ((bottom_of_screen > top_of_element) && (top_of_screen < bottom_of_element)){
        // the element is visible, do something
    } else {
        // the element is not visible, do something else
    }
});

この答えは、クリス・ビアとアンディが以下で議論していたことの要約です。私がやったように研究をしている間にこの質問に出くわした他の誰にも役立つことを願っています。また、次の質問への回答を使用して回答を作成しました。 スクロール位置にDivを表示 。

72
ADB

このような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;
};

サンプル使用法：

$(window).on('resize scroll', function() {
    if ($('#Something').isInViewport()) {
        // do something
    } else {
        // do something else
    }
});

これは要素の上部と下部の位置のみをチェックし、要素がビューポートの外側に水平にあるかどうかはチェックしないことに注意してください。

62
Tom Pažourek

この例 を見ることができます。

// Is this element visible onscreen?
var visible = $(#element).visible( detectPartial );

detectPartial：

  • True：要素全体が表示されます
  • false：要素の一部が表示されます

visibleは、要素が表示されるかどうかを示すブール変数です。

2
watou
var visible = $(".media").visible();
0
slvnperron