jquery - Come verificare se un elemento è fuori schermo




zk (6)

Devo controllare con jQuery se un elemento DIV non sta cadendo fuori dallo schermo. Gli elementi sono visibili e visualizzati secondo gli attributi CSS, ma potrebbero essere messi intenzionalmente fuori campo da:

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

Non ho potuto utilizzare jQuery :visible selettore :visible poiché l'elemento ha un'altezza e una larghezza non zero.

Non sto facendo niente di speciale. Questo posizionamento in posizione assoluta è il modo in cui il mio framework Ajax implementa il hide / show di alcuni widget.


È possibile controllare la posizione del div utilizzando $(div).position() e verificare se le proprietà del margine sinistro e superiore sono inferiori a 0:

if($(div).position().left < 0 && $(div).position().top < 0){
    alert("off screen");
}

Bene ... Ho trovato alcuni problemi in ogni soluzione proposta qui.

  • Dovresti essere in grado di scegliere se vuoi che l' intero elemento sia visualizzato sullo schermo o parte di esso
  • Le soluzioni proposte non funzionano se l'elemento è più alto / più largo della finestra e copre in qualche modo la finestra del browser.

Ecco la mia soluzione che include la funzione e l' expression jQuery .fn . Ho creato più variabili all'interno della mia funzione di quanto avrei potuto, ma per problemi logici complessi mi piace dividerlo in parti più piccole e chiaramente denominate.

Sto usando il metodo getBoundingClientRect che restituisce la posizione dell'elemento relativamente al viewport, quindi non ho bisogno di preoccuparmi della posizione di scorrimento

Utilizzo :

$(".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 

Fonte :

$.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);
};


Non c'è bisogno di un plugin per verificare se al di fuori della porta di visualizzazione.

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))
    }
});


  • Prendi la distanza dalla cima dell'elemento dato
  • Aggiungi l'altezza dello stesso dato elemento. Questo ti dirà il numero totale dalla parte superiore dello schermo fino alla fine dell'elemento specificato.
  • Quindi tutto ciò che devi fare è sottrarre quello dall'altezza totale del documento

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




zk