jquery - 使用 overflow-y:scroll 和更新的内容获取 DIV 的高度

Question

我有一个普通的空 DIV 溢出-y:scroll; 我通过类似 $(elem).html(new_content); 的内容更新该 div

现在这就是我迷路的地方。我需要用新内容获取整个 DIV 的高度。通常它会通过 ScrollTop 设置来完成，但问题是 $(elem)[0].scrollHeight 为零！

我该如何解决这个问题？

更新：我解决了这个问题。原来我的调用是在 JQuery UI 效果的回调函数中。回调函数应该使 DIV 可见。不知何故，即使它是一个回调函数，DIV 仍然不可见。所以，我不得不将超时设置为 10 毫秒，然后它就起作用了！！！

Answer 1

使用 .height() 并在每次更新 div 时检查

function newContent(){

    $('#test').html(new_content);
    var h = $('#test').height();
    console.log('new height is ' + h);

}

这是一个有效的 jsfiddle：http: //jsfiddle.net/F5K6H/

Answer 2

尝试这个：

HTML：

<div></div>
<button>Button</button>

JS：

$("button").click(function () {
  //BEFORE HTML INSERTED, DIV IS EMPTY
  var height = $("div").scrollTop($("div"))[0].scrollHeight;
  console.log(height); //Outputs 1 (the starting div height)
  alert(height);

  //Add more <p>TEST4</p> and see that height SCROLLHEIGHT does indeed grow/update.
  $("div").html("<p>TEST</p><p>TEST2</p><p>TEST3</p>");
  $("div").height(50); // DIV starts at 1PX, and we set to 50PX so that we can see contents.

  //AFTER HTML INSERTED
  height = $("div").scrollTop($("div"))[0].scrollHeight;
  console.log(height); //Outputs 124 (the scroll height, notice the actual div height is 50)
  alert(height);
});

jsfiddle