JQUERY，具有固定高度的div（帶有滾動條）如何進行動畫處理，直到變得不再需要滾動條？

Question

JQUERY，具有固定高度的div（帶有滾動條）如何進行動畫處理，直到變得不再需要滾動條？

我在具有CSS height：200px設置的頁面上有一個div，這使DIV具有垂直滾動條，該滾動條允許用戶滾動一堆文本。

我想為DIV設置動畫以使其高度擴大，直到顯示div中的所有內容，這意味着不再需要滾動條

我嘗試了以下方法：

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

但這在這樣做時不起作用：

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

問題在於DIV中的文本大小是可變的。 有想法嗎？

謝謝

Answer 1

你可以做什么：

將高度設置為auto ，然后記錄offsetHeight 。 立即將高度更改回原來的高度-因為瀏覽器是單線程的，所以用戶根本看不到更改。

然后使用jQuery（或不使用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");