web-dev-qa-db-fra.com

Vérifier avec jQuery si div a des éléments en débordement

J'ai un div avec une hauteur fixe et overflow:hidden;

Je veux vérifier avec jQuery si la div a des éléments qui débordent au-delà de la hauteur fixe de la div. Comment puis-je faire ceci?

javascriptjqueryhtml
118
Justin Meltzer

En fait, vous n'avez pas besoin de jQuery pour vérifier si un débordement se produit ou non. En utilisant element.offsetHeight , element.offsetWidth , element.scrollHeight et element.scrollWidth vous pouvez déterminer si le contenu de votre élément est supérieur à sa taille:

if (element.offsetHeight < element.scrollHeight ||
    element.offsetWidth < element.scrollWidth) {
    // your element have overflow
} else {
    // your element doesn't have overflow
}

Voir l'exemple en action: Fiddle

Mais si vous voulez savoir quel élément de votre élément est visible ou non, vous devez effectuer plus de calculs. Il y a trois états pour un élément enfant en termes de visibilité:

enter image description here

Si vous souhaitez compter les éléments semi-visibles, vous aurez besoin du script suivant:

var invisibleItems = [];
for(var i=0; i<element.childElementCount; i++){
  if (element.children[i].offsetTop + element.children[i].offsetHeight >
      element.offsetTop + element.offsetHeight ||
      element.children[i].offsetLeft + element.children[i].offsetWidth >
      element.offsetLeft + element.offsetWidth ){

        invisibleItems.Push(element.children[i]);
    }

}

Et si vous ne voulez pas compter semi-visible, vous pouvez calculer avec un peu de différence.

263
Mohsen

J'avais la même question que le PO et aucune de ces réponses ne correspondait à mes besoins. J'avais besoin d'une condition simple, pour un besoin simple.

Voici ma réponse:

if ($("#myoverflowingelement").prop('scrollWidth') > $("#myoverflowingelement").width() ) {
  alert("this element is overflowing !!");
}
else {
 alert("this element is not overflowing!!");
}

En outre, vous pouvez modifier scrollWidth par scrollHeight si vous devez tester l'un ou l'autre cas. 

33
sidney

J'ai donc utilisé la bibliothèque jquery débordante: https://github.com/kevinmarx/overflowing

Après avoir installé la bibliothèque, si vous souhaitez affecter la classe overflowing à tous les éléments en débordement, exécutez simplement: 

$('.targetElement').overflowing('.parentElement')

Cela donnera alors à la classe overflowing, comme dans <div class="targetElement overflowing">, tous les éléments en débordement. Vous pouvez ensuite l'ajouter à un gestionnaire d'événement (clic, souris) ou à une autre fonction qui exécutera le code ci-dessus afin qu'il soit mis à jour de manière dynamique. 

3
maudulus

Partiellement basé sur la réponse de Mohsen (la première condition ajoutée couvre le cas où l'enfant est caché avant le parent):

jQuery.fn.isChildOverflowing = function (child) {
  var p = jQuery(this).get(0);
  var el = jQuery(child).get(0);
  return (el.offsetTop < p.offsetTop || el.offsetLeft < p.offsetLeft) ||
    (el.offsetTop + el.offsetHeight > p.offsetTop + p.offsetHeight || el.offsetLeft + el.offsetWidth > p.offsetLeft + p.offsetWidth);
};

Alors juste faire:

jQuery('#parent').isChildOverflowing('#child');
3
brauliobo

Une méthode consiste à vérifier scrollTop par rapport à lui-même. Donnez au contenu une valeur de défilement supérieure à sa taille, puis vérifiez si son scrollTop est égal à 0 ou non (s'il n'est pas égal à 0, le débordement est atteint.)

http://jsfiddle.net/ukvBf/

2
Joseph Marikle

En clair: récupère l'élément parent. Vérifiez sa hauteur et enregistrez cette valeur. Parcourez ensuite tous les éléments enfants et vérifiez leur hauteur.

C'est sale, mais vous pourriez avoir l'idée de base: http://jsfiddle.net/VgDgz/

1
Doozer Blake

C'est la solution jQuery qui a fonctionné pour moi. offsetWidth etc. n'a pas fonctionné.

function is_overflowing(element, extra_width) {
    return element.position().left + element.width() + extra_width > element.parent().width();
}

Si cela ne fonctionne pas, assurez-vous que le parent des éléments a la largeur souhaitée (personnellement, je devais utiliser parent().parent()). position est relatif au parent. J'ai également inclus extra_width car mes éléments ("tags") contiennent des images qui prennent peu de temps pour charger, mais lors de l'appel de la fonction, ils ont une largeur nulle, ce qui gâche le calcul. Pour contourner ce problème, j'utilise le code d'appel suivant:

var extra_width = 0;
$(".tag:visible").each(function() {
    if (!$(this).find("img:visible").width()) {
        // tag image might not be visible at this point,
        // so we add its future width to the overflow calculation
        // the goal is to hide tags that do not fit one line
        extra_width += 28;
    }
    if (is_overflowing($(this), extra_width)) {
        $(this).hide();
    }
});

J'espère que cela t'aides.

0
Dennis Golomazov

Voici une solution pure jQuery, mais elle est plutôt compliquée:

var div_height = $(this).height();
var vertical_div_top_position = $(this).offset().top;
var lastchild_height = $(this).children('p:last-child').height();
var vertical_lastchild_top_position = $(this).children('p:last-child').offset().top;
var vertical_lastchild_bottom_position = lastchild_height + vertical_lastchild_top_position;
var real_height = vertical_lastchild_bottom_position - vertical_div_top_position;

if (real_height > div_height){
    //overflow div
}
0
Justin Meltzer