JQUERY, div avec une hauteur fixe (avec une barre de défilement) comment animer jusqu'à ce qu'il se développe pour ne plus avoir besoin d'une barre de défilement?

Question

JQUERY, div avec une hauteur fixe (avec une barre de défilement) comment animer jusqu'à ce qu'il se développe pour ne plus avoir besoin d'une barre de défilement?

J'ai un div sur une page avec un réglage CSS height: 200px, ce qui fait que le DIV a une barre de défilement verticale, ce qui permet à l'utilisateur de faire défiler un tas de texte.

Je voudrais animer la DIV pour développer en hauteur jusqu'à ce que tout le contenu du div est affichée, ce qui signifie plus la barre de défilement

J'ai essayé les éléments suivants:

$("#view-container").animate({"height": "auto"}, "slow"); 

mais cela n'a pas travailler pendant que cela fait:

$("#view-container").animate({"height": "1000px"}, "slow"); 

problème avec c'est la taille du texte dans la variable DIV est. Des idées?

Merci

Answer 1

Qu'est-ce que vous pouvez faire:

Régler la hauteur auto, puis enregistrer la offsetHeight. Remettez la hauteur à ce qu'elle était immédiatement - les utilisateurs ne verront pas la modification du tout car les navigateurs sont à un seul thread. Puis utilisez jQuery (ou non) pour animer à cette hauteur enregistrée.

Exemple:

var vc = document.getElementById('view-container'); 
var vcold = vc.style.height; 
vc.style.height = 'auto'; 
var vcheight = vc.offsetHeight; 
vc.style.height = vcold; 
$("#view-container").animate({"height": vcheight + "px"}, "slow");