Comment vérifier si l'élément est hors écran

Question

Je dois vérifier avec jQuery si un élément DIV ne tombe pas hors écran. Les éléments sont visibles et affichés en fonction des attributs CSS, mais ils pourraient être intentionnellement placés hors écran par:

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

Je ne pouvais pas utiliser le sélecteur jQuery :visible car l'élément a une hauteur et une largeur non nulles.

Je ne fais rien d'extraordinaire, cet emplacement absolu est la façon dont mon framework AJAX implémente le masquage / affichage de certains widgets.

Answer 1

Dépend de ce que votre définition de "hors champ" est. C'est que dans la vue, ou dans les limites définies de votre page?

Il serait assez simple d'écrire un chèque pour voir si elle est hors de l'écran (en ne prenant pas la fenêtre d'affichage en compte...)

jQuery.expr.filters.offscreen = function(el) {
  return (
              (el.offsetLeft + el.offsetWidth) < 0 
              || (el.offsetTop + el.offsetHeight) < 0
              || (el.offsetLeft > window.innerWidth || el.offsetTop > window.innerHeight)
         );
};

Vous pouvez ensuite l'utiliser de plusieurs façons:

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

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

Si vous avez également besoin de vérifier si l'élément est dans le visible zone de fenêtre d'affichage, vous pouvez utiliser le plugin comme suggéré par sdepold.

Answer 2

Il y a un plugin jQuery ici qui permet aux utilisateurs de tester si un élément tombe dans le visible fenêtre d'affichage du navigateur, de prendre les navigateurs scorll position en compte.

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

Vous pouvez également vérifier pour une partie de la visibilité:

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

Un inconvénient est qu'il fonctionne uniquement avec le positionnement vertical / défilement, mais il devrait être assez facile d'ajouter de positionnement horizontal dans le mélange.

Answer 3

Vous pouvez consulter le viewport-selector-extensions pour jQuery, situé ici: http://www.appelsiini.net/projects/viewport . Avec cela, vous pouvez faire ceci:

 jQuery('#foo').is(':in-viewport')
 

Answer 4

Créé un petit plugin qui fait cela, et a quelques options flexibles. (fonctionne également lorsque vous redimensionnez le navigateur)

https://github.com/gijsroge/offscreen.js

Answer 5

Je sais que c'est un peu tard, mais ce plugin devrait fonctionner. 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');
}