web-dev-qa-db-fra.com

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

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 jQuery :visible sélecteur car l’élément a une hauteur et une largeur non nulles.

Je ne fais rien d'extraordinaire. Cet emplacement de position absolue est la façon dont mon Ajax implémente le masquage/affichage de certains widgets.

jqueryzk
72
Max

Dépend de ce que votre définition de "hors écran" est. Est-ce dans la fenêtre d'affichage ou dans les limites définies de votre page?

En utilisant Element.getBoundingClientRect () , vous pouvez facilement détecter si votre élément se trouve ou non dans les limites de votre fenêtre de visualisation (c'est-à-dire à l'écran ou à l'écran):

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

Vous pouvez ensuite l'utiliser de plusieurs manières:

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

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

Il y a un plugin jQuery ici qui permet aux utilisateurs de vérifier si un élément tombe dans la fenêtre d'affichage visible du navigateur, en prenant en compte la position de défilement du navigateur.

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

Vous pouvez également vérifier la visibilité partielle:

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

Un inconvénient est que cela ne fonctionne qu'avec le positionnement vertical/défilement, bien qu'il soit assez facile d'ajouter un positionnement horizontal dans le mixage.

17
Sam Sehnert

Pas besoin d'un plugin pour vérifier si le port est en dehors de la vue.

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))
    }
});
8
Simon Hudin

Eh bien ... j'ai trouvé des problèmes dans chaque solution proposée ici.

  • Vous devriez pouvoir choisir si vous voulez que élément entier soit à l'écran ou n'importe quelle partie de celui-ci
  • Solutions proposées échoue si l'élément est plus haut/plus large que la fenêtre et un peu couvre la fenêtre du navigateur.

Voici ma solution qui inclut jQuery.fn fonction d'instance et expression. J'ai créé plus de variables dans ma fonction que je n'aurais pu, mais pour les problèmes logiques complexes, j'aime les diviser en morceaux plus petits et clairement nommés.

J'utilise la méthode getBoundingClientRect qui renvoie la position de l'élément par rapport à la fenêtre d'affichage je n'ai donc pas besoin de me soucier de la position du défilement

tilisation:

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

Source:

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

J'ai créé n petit plugin qui fait cela , et il a quelques options flexibles (cela fonctionne aussi lorsque vous redimensionnez la fenêtre du navigateur).

3
Gijs Roge

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');
}
1
mukama
  • Obtenir la distance du haut de l'élément donné
  • Ajouter la hauteur du même élément donné. Cela vous indiquera le nombre total du haut de l'écran à la fin de l'élément donné.

  • Il ne vous reste plus qu'à soustraire cela de la hauteur totale du document.

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