web-dev-qa-db-fra.com

jQuery .height () produisant la même valeur que .scrollHeight sur div avec dépassement de capacité: auto (IE8)

Après avoir parcouru de nombreuses autres questions, je n’ai trouvé aucune réponse permettant de résoudre mon problème.

J'écris un script pour savoir si la div déborde. Mais lorsque vous essayez de récupérer la hauteur visible avec jQuery.height(), jQuery.innerHeight() ou JavaScripts offsetHeight. On me donne la valeur de div entière (y compris la partie qui déborde), à ​​savoir: la même valeur que scrollHeight.

Le style contenant les DIV:

{
    overflow-x: hidden;
    overflow-y: auto;
    width: 73%;
    bottom: 0px;
    float: left;
    height: 100%;
    top: 0px;
}

J'ai créé une maquette du scénario sur jsFiddle: http://jsfiddle.net/Lukedturnbull/L2bxmszv/3/ (Assurez-vous de réduire la taille de l'écran de prévisualisation pour créer la barre de défilement)

javascriptjqueryhtmlcssinternet-explorer-8
6
Luke Turnbull

Tout semble aller bien, jQuery.height() et jQuery.innerHeight() n'a rien à voir avec la propriété overflow. Ils renverront des hauteurs, pas seulement la partie visible.

Si vous voulez connaître la hauteur du contenu, vous devez utiliser scrollHeight. Cette scrollHeight est une propriété javascript régulière, vous n'avez pas à utiliser jQuery

document.getElementById("wrapper").scrollHeight;

Ou vous pouvez utiliser le sélecteur jQuery

$('#wrapper')[0].scrollHeight;

Voir le jsfiddle de travail: http://jsfiddle.net/scgz7an5/1/

Remarquerez que

$('#wrapper').scrollHeight;

retourne non défini.

UPDATE

Vous avez oublié la partie la plus importante des éléments flottants. Vous avez oublié de les effacer.

Jetez un oeil à ce jsfiddle, est une édition de la vôtre mais avec les éléments flottants effacés. Vous y voyez des valeurs différentes pour scrollHeight et jQuery.height(). Voir que .structureContent est celui qui a la barre de défilement, pas .content ni .width100.

.structureContent a overflow:auto et la barre de défilement que vous voyez provient de celle-ci.

http://jsfiddle.net/L2bxmszv/5/

J'ai ajouté cette classe pour effacer vos éléments flottants.

.clearfix:before,
.clearfix:after, {
  content: '\0020';
  display: block;
  overflow: hidden;
  visibility: hidden;
  width: 0;
  height: 0; }
.clearfix:after {
  clear: both; }
.clearfix {
  zoom: 1; }

La sortie était la suivante:

.content
324 for scrollHeight
324 for clientHeight
324 for jQuery.height()
.structureContent
324 for scrollHeight
276 for clientHeight
276 for jQuery.height()

Voir un excellent article sur les éléments flottants et les effacer ici: http://css-tricks.com/all-about-floats/

14
Carlos Calla

La barre de défilement que vous voyez est en réalité sur l'élément .structureContent et non sur .content. C'est pourquoi .content renvoie la même valeur. .content n'est pas tronqué.

1
James Montagne

J'ai maintenant trouvé une solution à mon problème, bien que je ne comprenne pas bien pourquoi il le fait.

Ce n'est pas du code HTML et du code que j'ai écrit et j'écrivais simplement un correctif pour voir si la barre de défilement apparaît. Mais j'ai trouvé que l'obtention du ScrollHeight et de la hauteur du parent du conteneur a résolu mon problème. Comparer pour voir si le scrollHeight est supérieur à la hauteur m'a permis de résoudre le problème.

0
Luke Turnbull