使用overflow-y獲得DIV的高度：滾動和更新內容

我有一個帶有overflow-y：scroll的常規空DIV;我通過類似$（elem）.html（new_content）的內容更新該div的內容;使用overflow-y獲得DIV的高度：滾動和更新內容

現在這是我迷路的地方。我需要用新的內容來獲得整個DIV的高度。通常它會通過ScrollTop設置完成，但問題是$（elem）[0] .scrollHeight是零！

我該如何解決這個問題？

更新：我解決了這個問題。原來，我的調用是在JQuery UI效果的回調函數中。回調函數應該使DIV可見。不知何故，即使它是一個回調函數，DIV仍然不可見。所以，我必須將TimeTime設置爲10 mS，然後才能正常工作！

2013-07-23 kidalex

試試這個：

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

來源

2013-07-23 21:55:05 projeqht

不，那只是給我的DIV的可見部分的高度。但我想要所有內容的整個高度。 – kidalex

已經更新的答案。 – projeqht

這就是我最初發布爲非工作代碼的答案。 scrollHeight返回零，因爲這是內容的原始高度，直到它被更新。 – kidalex

使用.height（），檢查每次更新DIV

function newContent(){ 

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

}

這裏有一個工作的jsfiddle：http://jsfiddle.net/F5K6H/

來源

2013-07-24 02:52:42 Nick

使用overflow-y獲得DIV的高度：滾動和更新內容

回答

相關問題