JQUERY, div с фиксированной высотой (с полосой прокрутки), как анимировать, пока он не станет больше, чтобы больше не нужна полоса прокрутки?

Question

JQUERY, div с фиксированной высотой (с полосой прокрутки), как анимировать до тех пор, пока он не перестанет нуждаться в полосе прокрутки?

У меня есть div на странице с настройкой CSS height: 200px, которая позволяет DIV иметь вертикальную полосу прокрутки, которая позволяет пользователю прокручивать кучу текста.

Я хотел бы анимировать DIV, чтобы он увеличивался по высоте до тех пор, пока не отобразится все содержимое в div, то есть полоса прокрутки больше не будет

Я попробовал следующее:

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

но это не сработало, в то время как это сработало:

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

Проблема в том, что размер текста в DIV является переменной. Идеи?

Спасибо

Answer 1

Что вы можете сделать:

Установите высоту auto, затем запишите offsetHeight. Измените высоту обратно на прежнюю - пользователи вообще не увидят изменения, поскольку браузеры однопоточные.

Затем используйте jQuery (или нет) для анимации на эту записанную высоту.

Пример:

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");