jQuery要素が見られるかどうかを確認します

要素が見られるかどうかを確認するためのいくつかのjQueryスニペット 。

<span>function isScrolledIntoView(elem)
</span><span>{
</span>    <span>var docViewTop = $(window).scrollTop();
</span>    <span>var docViewBottom = docViewTop + $(window).height();
</span>
    <span>var elemTop = $(elem).offset().top;
</span>    <span>var elemBottom = elemTop + $(elem).height();
</span>
    <span>return ((elemBottom < = docViewBottom) && (elemTop >= docViewTop));
</span><span>}
</span>
<span>isInView: function(elem)
</span><span>{
</span>    <span>var docViewTop = $(window).scrollTop(),
</span>        docViewBottom <span>= docViewTop + $(window).height(),
</span>        elemTop <span>= $(elem).offset().top,
</span>        elemBottom <span>= elemTop + $(elem).height();
</span>    <span>return ((elemBottom < = docViewBottom) && (elemTop >= docViewTop));
</span><span>}</span>

私がこれまでに見つけた最良の方法は、jQueryが表示されるプラグインです。魅力のように機能します。

jQueryチェック要素ビュー

に関するよくある質問（FAQ）

jQueryを使用して、要素がビューポートにあるかどうかを確認するにはどうすればよいですか？

要素がjqueryを使用してビューポートにあるかどうかを確認するには、：in-viewportセレクターを使用できます。このセレクターは、現在ビューポートに表示されているすべての要素を返します。簡単な例を次に示します。

if（$（ "element"）。is（ "：in-viewport"））{
//要素はviewport
//要素がビューポートにない
}
the：jqueryの可視セレクターは、非表示の要素を選択します。これは、要素が現在ビューポートにない場合（つまり、スクロールのために画面外である場合）、次のように選択されます。これは、要素がスクロールのために画面外である場合、次のように選択されないことを意味します：

var top_of_element = $（ "＃element"）。offset（）。top;

var bottond_of_element = $（ "＃要素"）。トップ$（ "＃要素"）。 $（window）.scrolltop（）$（window）.innerheight（）;

if（（bottond_of_screen> top_of_of_element）&&（top_of_screen //要素は目に見える、何か

それ以外の場合、

}

このコードは、要素の上部と下部がビューポート内にあるかどうかをチェックし、結果に基づいてアクションを実行します。

jqueryを使用して、プラグインを使用せずに要素がビューポートにあるかどうかを確認できますか？

​​

はい、jqueryを使用して、プラグインを使用せずに要素がビューポートにあるかどうかを確認できます。簡単な例を次に示します：

関数ISElementInviewport（el）{
var rect = el.getBoundingClientRect（）;
return（
rect.top> = 0 &&
rect.left> = 0 &&
rect.bottom rect.right ）;
}
この関数は、getBoundingClientRect（）メソッドを使用してビューポートに比べて要素の位置を取得し、その後、要素がjquerである場合は、jquerの場合はjquerの場合に確認されます。 viewport？ 要素が部分的にビューポートにあるかどうかを確認するには、jQueryのOffset（）メソッドを使用して要素の位置を取得し、ビューポートの寸法と比較できます。例は次のとおりです。

var top_of_element = $（ "＃element"）。offset（）。top;

var bottond_of_element = $（ "＃要素"）。トップ$（ "＃要素"）。 $（window）.scrolltop（）$（window）.innerheight（）;

if（（bottond_of_screen> top_of_element）&&（top_of_screen //要素は部分的に視認されます。それ以外の場合、
}
このコードは、要素の上部または下部がビューポート内にあるかどうかをチェックし、結果に基づいてアクションを実行します。

以上がjQuery要素が見られるかどうかを確認しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。