web-dev-qa-db-ja.com

要素が画面外にあるかどうかを確認する方法

DIV要素が画面外に落ちていない場合は、jQueryで確認する必要があります。要素はCSS属性に従って表示および表示されますが、次の方法で意図的に画面外に配置できます。

position: absolute; 
left: -1000px; 
top: -1000px;

要素の高さと幅がゼロ以外であるため、jQuery :visibleセレクターを使用できませんでした。

私は空想をしていません。この絶対位置の配置は、私の Ajax フレームワークがいくつかのウィジェットの非表示/表示を実装する方法です。

jqueryzk
72
Max

「オフスクリーン」の定義によって異なります。ビューポート内ですか、それともページの定義された境界内ですか？

Element.getBoundingClientRect（） を使用すると、要素がビューポートの境界内にあるかどうかを簡単に検出できます（画面上または画面外）。

jQuery.expr.filters.offscreen = function(el) {
  var rect = el.getBoundingClientRect();
  return (
           (rect.x + rect.width) < 0 
             || (rect.y + rect.height) < 0
             || (rect.x > window.innerWidth || rect.y > window.innerHeight)
         );
};

その後、いくつかの方法でそれを使用できます。

// returns all elements that are offscreen
$(':offscreen');

// boolean returned if element is offscreen
$('div').is(':offscreen');
118
scurker

jQueryプラグインはこちら があり、ブラウザのスクロール位置を考慮して、要素がブラウザの表示ビューポート内に収まるかどうかをテストできます。

$('#element').visible();

部分的な可視性も確認できます。

$('#element').visible( true);

1つの欠点は、垂直方向の位置決め/スクロールでのみ機能することですが、水平方向の位置決めをミックスに追加するのに十分簡単であるべきです。

17
Sam Sehnert

ビューポートの外にあるかどうかを確認するプラグインは必要ありません。

var w = Math.max(document.documentElement.clientWidth, window.innerWidth || 0)
var h = Math.max(document.documentElement.clientHeight, window.innerHeight || 0)
var d = $(document).scrollTop();

$.each($("div"),function(){
    p = $(this).position();
    //vertical
    if (p.top > h + d || p.top > h - d){
        console.log($(this))
    }
    //horizontal
    if (p.left < 0 - $(this).width() || p.left > w){
        console.log($(this))
    }
});
8
Simon Hudin

さて...ここで提案されたすべてのソリューションでいくつかの問題を発見しました。

  • 要素全体を画面に表示するか、その一部のみにするかを選択できるはずです。
  • 提案されたソリューション要素がウィンドウよりも高い/広い場合は失敗しますおよびkindacoversブラウザーウィンドウ。

jQuery.fnインスタンス関数とexpressionを含む私のソリューションです。関数内にできる以上の変数を作成しましたが、複雑な論理的な問題のために、それをより小さく、明確に名前が付けられたピースに分割するのが好きです。

ビューポートに対して相対的に要素の位置を返すgetBoundingClientRectメソッドを使用していますしたがって、スクロール位置を気にする必要はありません

使用法：

$(".some-element").filter(":onscreen").doSomething();
$(".some-element").filter(":entireonscreen").doSomething();
$(".some-element").isOnScreen(); // true / false
$(".some-element").isOnScreen(true); // true / false (partially on screen)
$(".some-element").is(":onscreen"); // true / false (partially on screen)
$(".some-element").is(":entireonscreen"); // true / false

ソース：

$.fn.isOnScreen = function(partial){

    //let's be sure we're checking only one element (in case function is called on set)
    var t = $(this).first();

    //we're using getBoundingClientRect to get position of element relative to viewport
    //so we dont need to care about scroll position
    var box = t[0].getBoundingClientRect();

    //let's save window size
    var win = {
        h : $(window).height(),
        w : $(window).width()
    };

    //now we check against edges of element

    //firstly we check one axis
    //for example we check if left Edge of element is between left and right Edge of scree (still might be above/below)
    var topEdgeInRange = box.top >= 0 && box.top <= win.h;
    var bottomEdgeInRange = box.bottom >= 0 && box.bottom <= win.h;

    var leftEdgeInRange = box.left >= 0 && box.left <= win.w;
    var rightEdgeInRange = box.right >= 0 && box.right <= win.w;


    //here we check if element is bigger then window and 'covers' the screen in given axis
    var coverScreenHorizontally = box.left <= 0 && box.right >= win.w;
    var coverScreenVertically = box.top <= 0 && box.bottom >= win.h;

    //now we check 2nd axis
    var topEdgeInScreen = topEdgeInRange && ( leftEdgeInRange || rightEdgeInRange || coverScreenHorizontally );
    var bottomEdgeInScreen = bottomEdgeInRange && ( leftEdgeInRange || rightEdgeInRange || coverScreenHorizontally );

    var leftEdgeInScreen = leftEdgeInRange && ( topEdgeInRange || bottomEdgeInRange || coverScreenVertically );
    var rightEdgeInScreen = rightEdgeInRange && ( topEdgeInRange || bottomEdgeInRange || coverScreenVertically );

    //now knowing presence of each Edge on screen, we check if element is partially or entirely present on screen
    var isPartiallyOnScreen = topEdgeInScreen || bottomEdgeInScreen || leftEdgeInScreen || rightEdgeInScreen;
    var isEntirelyOnScreen = topEdgeInScreen && bottomEdgeInScreen && leftEdgeInScreen && rightEdgeInScreen;

    return partial ? isPartiallyOnScreen : isEntirelyOnScreen;

};

$.expr.filters.onscreen = function(elem) {
  return $(elem).isOnScreen(true);
};

$.expr.filters.entireonscreen = function(elem) {
  return $(elem).isOnScreen(true);
};
4
pie6k

これを行う小さなプラグイン を作成しましたが、いくつかの柔軟なオプションがあります（ブラウザーウィンドウのサイズを変更するときにも機能します）。

3
Gijs Roge

私はこれがちょっと遅れていることを知っていますが、このプラグインは動作するはずです。 http://remysharp.com/2009/01/26/element-in-view-event-plugin/

$('p.inview').bind('inview', function (event, visible) {
if (visible) {
  $(this).text('You can see me!');
} else {
  $(this).text('Hidden again');
}
1
mukama
  • 指定された要素の上部からの距離を取得します
  • 指定された同じ要素の高さを追加します。これにより、画面の上部から特定の要素の最後までの合計数がわかります。

  • その後、あなたがしなければならないのは、ドキュメントの合計の高さからそれを引くことです

    jQuery(function () {
    var documentHeight = jQuery(document).height();
    var element = jQuery('#you-element');
    var distanceFromBottom = documentHeight - (element.position().top + element.outerHeight(true));
    alert(distanceFromBottom)
});
0
user5294803