Vérifiez avec jquery si div a des éléments débordants

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

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

En fait, vous n'avez pas besoin de jQuery pour vérifier s'il y a un débordement ou non. En utilisant element.offsetHeight, element.offsetWidth, element.scrollHeightet element.scrollWidthvous pouvez déterminer si ont un contenu plus grand que la taille de ce votre élément:

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 à l'intérieur de votre élément est visible ou non, vous devez faire plus de calcul. Il existe trois états pour un élément enfant en termes de visibilité:

Si vous voulez compter les éléments semi-visibles, ce serait le script dont vous avez besoin:

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 une petite différence.

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

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 changer scrollWidthde scrollHeightsi vous avez besoin de tester l' une ou l' autre cas.

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 débordants, vous exécutez simplement:

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

Cela donnera alors la classe overflowing, comme <div class="targetElement overflowing">pour tous les éléments qui débordent. Vous pouvez ensuite l'ajouter à un gestionnaire d'événements (clic, survol de la souris) ou à une autre fonction qui exécutera le code ci-dessus afin qu'il se mette à jour dynamiquement.

Partiellement basé sur la réponse de Mohsen (la première condition ajoutée couvre le cas où l'enfant est caché devant 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 faites simplement:

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

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

http://jsfiddle.net/ukvBf/

En anglais simple: obtenez l'élément parent. Vérifiez sa hauteur et enregistrez cette valeur. Ensuite, parcourez tous les éléments enfants et vérifiez leurs hauteurs individuelles.

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

Voici une solution jQuery pure, 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
}

C'est la solution jQuery qui a fonctionné pour moi. offsetWidthetc. 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, j'ai dû utiliser parent().parent()). positionEst relatif au parent. J'ai également inclus extra_widthparce que mes éléments ("balises") contiennent des images qui prennent peu de temps à charge, mais pendant l'appel de fonction, ils ont une largeur nulle, ce qui gâche le calcul. Pour contourner cela, 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.

J'ai corrigé cela en ajoutant un autre div dans celui qui déborde. Ensuite, vous comparez les hauteurs des 2 divs.

<div class="AAAA overflow-hidden" style="height: 20px;" >
    <div class="BBBB" >
        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
    </div>
</div>

et le js

    if ($('.AAAA').height() < $('.BBBB').height()) {
        console.log('we have overflow')
    } else {
        console.log('NO overflow')
    }

Cela semble plus facile ...