Détecter si le débordement entre en jeu sur un élément

Question

J'ai un div, ce sera une certaine hauteur fixe. Dites 500px. Généralement, il aura des blocs de contenu plus long que 500px et en utilisant overflow: auto; une barre de défilement apparaîtra dans l'élément. Cependant, dans certains cas, ce n'est pas le cas et le design semble bancal (la barre de défilement est en effet un élément de design ici).

Markup pourrait ressembler à ceci:

<div class="col2"> 
    ... 
</div> 

Lorsque .col2 comporte des éléments débordants (ie une barre de défilement) Je veux ne rien faire, quand il ne fait pas, je veux ajouter une autre classe (quelque chose avec une frontière), peut-être .border.

Vous ne savez pas trop comment vous y prendre? De préférence avec jQuery car cette bibliothèque est déjà utilisée. J'apprécierais vraiment toute aide!

Answer 1

Cela devrait vous aider ... Créez essentiellement des fonctions qui vous indiquent la météo ou non, le div aura une barre de défilement. (Vertical ou horizontal)

$.fn.hasVerticalScrollBar = function() { 
    if (this[0].clientHeight < this[0].scrollHeight) { 
    return true 
    } else { 
    return false 
    } 
} 

$.fn.hasHorizontalScrollBar = function() { 
    if (this[0].clientWidth < this[0].scrollWidth) { 
    return true 
    } else { 
    return false 
    } 
} 

Utilisation

alert($('#mydivid').hasHorizontalScrollBar()); 
alert($('#mydivid').hasVerticalScrollBar());