Vérifiez avec jquery si div a débordant éléments

Question

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 passé la fixe à la hauteur de la div. Comment puis-je faire cela?

Answer 1

Vous avez réellement n'avez pas besoin de jQuery pour vérifier si il y a un dépassement qui se passe ou pas. À l'aide de element.offsetHeight, element.offsetWidth , element.scrollHeight et element.scrollWidth vous pouvez déterminer si votre élément de contenu plus grand que sa taille:

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

Voir l'exemple de l'action: Violon

Mais si vous voulez savoir quel élément à l'intérieur de votre élément est visible ou non, alors vous avez besoin de faire plus de calcul. Il y a trois états d'un élément enfant en termes de visibilité:

Si vous voulez compter semi-visible articles, il serait le script, vous devez:

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.

Answer 2

J'ai eu la même question que l'OP, et aucune de ces réponses monté 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!!");
}

Aussi, vous pouvez changer scrollWidth par scrollHeight si vous avez besoin de tester l'un ou l'autre cas.

Answer 3

Une méthode consiste à vérifier scrollTop contre lui-même. Donner le contenu d'une valeur de défilement plus grande que sa taille et de vérifier ensuite si son scrollTop est 0 ou pas (si elle n'est pas 0, il a de débordement.)

http://jsfiddle.net/ukvBf/

Answer 4

En clair: Obtenir l'élément parent. Vérifier la hauteur, et enregistrer cette valeur. Puis une boucle sur tous les éléments enfants et de vérifier leurs hauteurs.

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

Answer 5

Voici un pur jQuery solution, mais c'est plutôt le désordre:

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
}