jquery - una - Cómo verificar si un elemento está fuera de pantalla

saber si un elemento es visible javascript

Question

Necesito verificar con jQuery si un elemento DIV no cae fuera de la pantalla. Los elementos son visibles y se muestran según los atributos de CSS, pero se pueden colocar intencionalmente fuera de la pantalla al:

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

No pude usar el jQuery :visible selector :visible ya que el elemento tiene un alto y ancho distinto de cero.

No estoy haciendo nada elegante. Esta ubicación de posición absoluta es la forma en que mi marco Ajax implementa el hide / show de algunos widgets.

Answer 1

Aquí hay un plugin jQuery que permite a los usuarios probar si un elemento cae dentro de la ventana visible del navegador, teniendo en cuenta la posición de desplazamiento del navegador.

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

También puede verificar la visibilidad parcial:

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

Una desventaja es que solo funciona con posicionamiento vertical / desplazamiento, aunque debería ser lo suficientemente fácil como para agregar un posicionamiento horizontal en la mezcla.

Answer 2

Bueno ... He encontrado algunos problemas en cada solución propuesta aquí.

• Debería poder elegir si desea que todo el elemento esté en pantalla o solo una parte de él
• Las soluciones propuestas fallan si el elemento es más alto / más ancho que la ventana y cubre un poco la ventana del navegador.

Aquí está mi solución que incluye jQuery .fn función de instancia y expression . He creado más variables dentro de mi función que pude, pero por un problema lógico complejo me gusta dividirlo en piezas más pequeñas y claramente nombradas.

Estoy usando el método getBoundingClientRect que devuelve la posición del elemento con relación a la ventana gráfica, así que no necesito preocuparme por la posición de desplazamiento

Uso :

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

Fuente :

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

Answer 3

Creé un pequeño complemento que hace esto , y tiene algunas opciones flexibles (también funciona cuando cambia el tamaño de la ventana del navegador).

Answer 4

Depende de lo que sea su definición de "fuera de pantalla". ¿Eso está dentro de la ventana gráfica o dentro de los límites definidos de tu página?

Usando Element.getBoundingClientRect() puedes detectar fácilmente si tu elemento está dentro de los límites de tu ventana (es decir, en pantalla o fuera de pantalla):

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

Podrías usar eso de varias maneras:

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

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

Answer 5

No es necesario un complemento para verificar si está fuera del puerto de visualización.

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

Answer 6

Puede verificar la posición del div usando $(div).position() y verificar si las propiedades del margen izquierdo y superior son menores que 0:

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

Answer 7

Sé que esto es un poco tarde pero este complemento debería funcionar. 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'');
}

Answer 8

• Obtener la distancia desde la parte superior del elemento dado
• Agregue la altura del mismo elemento dado. Esto le indicará el número total desde la parte superior de la pantalla hasta el final del elemento dado.

• Entonces, todo lo que tienes que hacer es restarlo de la altura total 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)
  });