So überprüfen Sie, ob ein Element außerhalb des Bildschirms liegt

Ich muss mit jQuery prüfen, ob ein DIV-Element nicht vom Bildschirm fällt. Die Elemente sind sichtbar und werden gemäß den CSS-Attributen angezeigt. Sie können jedoch absichtlich außerhalb des Bildschirms platziert werden durch:

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

Ich konnte den jQuery- :visibleSelektor nicht verwenden, da das Element eine Höhe und Breite ungleich Null hat.

Ich mache nichts Besonderes. Diese absolute Positionsplatzierung ist die Art und Weise, wie mein Ajax- Framework das Ein- und Ausblenden einiger Widgets implementiert.

Hängt davon ab, wie Sie "Offscreen" definieren. Befindet sich das im Ansichtsfenster oder innerhalb der definierten Grenzen Ihrer Seite?

Mit Element.getBoundingClientRect () können Sie leicht erkennen, ob sich Ihr Element innerhalb der Grenzen Ihres Ansichtsfensters befindet (dh auf dem Bildschirm oder außerhalb des Bildschirms):

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

Sie können das dann auf verschiedene Arten verwenden:

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

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

Hier gibt es ein jQuery-Plugin, mit dem Benutzer testen können, ob ein Element in das sichtbare Ansichtsfenster des Browsers fällt, wobei die Bildlaufposition des Browsers berücksichtigt wird.

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

Sie können auch die teilweise Sichtbarkeit überprüfen:

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

Ein Nachteil ist, dass es nur mit vertikaler Positionierung / Scrollen funktioniert, obwohl es einfach genug sein sollte, der Mischung eine horizontale Positionierung hinzuzufügen.

Es ist kein Plugin erforderlich, um zu überprüfen, ob es sich außerhalb des Ansichtsports befindet.

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

Nun ... Ich habe hier in jeder vorgeschlagenen Lösung einige Probleme gefunden.

• Sie sollten auswählen können, ob das gesamte Element oder nur ein Teil davon auf dem Bildschirm angezeigt werden soll
• Vorgeschlagene Lösungen schlagen fehl, wenn das Element höher / breiter als das Fenster ist und das Browserfenster irgendwie abdeckt .

Hier ist meine Lösung, die jQuery .fnInstanzfunktion und enthält expression. Ich habe mehr Variablen in meiner Funktion erstellt, als ich konnte, aber für komplexe logische Probleme teile ich sie gerne in kleinere, klar benannte Teile.

Ich verwende eine getBoundingClientRectMethode, die die Elementposition relativ zum Ansichtsfenster zurückgibt, sodass ich mich nicht um die Bildlaufposition kümmern muss

Verwendung :

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

Quelle :

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

Ich weiß, dass dies etwas spät ist, aber dieses Plugin sollte funktionieren. 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');
}

• Ermitteln Sie den Abstand vom oberen Rand des angegebenen Elements
• Fügen Sie die Höhe desselben Elements hinzu. Hier erfahren Sie die Gesamtzahl vom oberen Bildschirmrand bis zum Ende des angegebenen Elements.

• Dann müssen Sie nur noch das von der gesamten Dokumenthöhe abziehen

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

Sie können die Position des Div mit $(div).position()überprüfen und prüfen, ob die Eigenschaften für den linken und oberen Rand kleiner als 0 sind:

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