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

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.

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

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.

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

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

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).

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

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