動的追加したコントロールのscrollHeightが取れない

Question

質問と表題変更しました。
下でいろいろ書いていますが、結局のところ
ajaxで動的追加したコントロールのscrollHeightが取れないことが原因だと思います。
動的追加したコントロールのscrollHeightはどのようにしてて取ればいいのでしょうか？

ちなみにdomは取れています。
動的追加したmodal内のテキストのdomは取得できているけれど、
そのscrollHeightはどうやっても0です。

ちなみに一度modalで表示された後、
他のボタンクリックイベントで同じようにscrollHeightを取得すると
ちゃんと取れています。

＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

modalウインドウを表示する際、
modalウインドウ上のテキスト（スクロールバー付き）
のスクロールバーを一番下にしておきたいです。

どのように実現すればよいでしょうか？
modalは、画面表示時にその時のデータでajaxで自動生成させています。
生成後にスクロールさせているつもりですが、実現しません。

readyタイミングではなく、modal生成後にmodal内ボタンで
同じ処理をすれば高さは取れます。

$(document).ready(function () {
    setmodal();
});

// メッセージポップアップ
function setmodal(job, messageid) {

    // 引数
    var postData = {};

    // ajax
    $.ajax({
        type: "POST",
        url: "/hogehoge/hagehage",
        data: postData,
        dataType: 'html',
    }).done(function(html) {

        // ajaxで生成したmodalのtplを本体へ埋め込む
        showData(html);

    }).fail(function() {
        alert("エラー");
    });
}

function showData(html) {

    // 本体のtplのmodalを埋め込みたい箇所
    var $body = $("#hoge");

    $body.empty();

    $body.append(html);

 　　// ajaxで取得したhtmlのmodalエリア
    $("#hogehogemodal").modal();
    
     // 最新のメッセージまでスクロール
     $('#スクロール付きテキスト').scrollTop(
     $('#スクロール付きテキスト')[0].scrollHeight - $('#スクロール付きテキスト').height()
     );


}

Comments

[yambejp]

htmlにもjavascriptにもモーダルで開くユーザーフォームはないので
具体的にどうしているのかを書いてもらわないと。
modalの表示がappendなのかdisplayの調整なのかでもトリガーが変わってきます

[ms5025]

修正しました

[x_x]

突然出てきた psconsole は何でしょうか？
ほかの id も何を指しているのか不明なので明らかにしてください。

[ms5025]

id修正しました。
①本体のtplのmodalを埋め込みたい箇所（動的にmodalを作成するため
本体にmodalのhtmlを埋め込むための指標です）
var $body = $("#hoge");

②こちらはajaxで取得したhtmlのmodal本体のidです
$("#hogehogemodal").modal();

Answer 1

参考程度に

textareaのようにセレクションに依存するものと
divのようにあscrollTopに依存するものがあります

<script>
window.addEventListener('DOMContentLoaded', function(e){
  [].forEach.call(document.querySelectorAll('textarea'),function(x){
    x.focus();
    var l=x.value.length;
    x.selectionStart=l;
    x.selectionEnd=l;
  });
  [].forEach.call(document.querySelectorAll('div'),function(x){
    x.scrollTop=x.scrollHeight;
  });
});
</script>
<textarea>
1
2
3
4
5
6
7
8
9
10</textarea>
<textarea>
11
12
13
14
15
16
17
18
19
20</textarea>

<div style="height:3em;width:200px;border:1px solid;overflow-y:scroll">
21<br>
22<br>
23<br>
24<br>
25<br>
26<br>
27<br>
28<br>
29<br>
30<br>
</div>
<div style="height:3em;width:200px;border:1px solid;overflow-y:scroll">
31<br>
32<br>
33<br>
34<br>
35<br>
36<br>
37<br>
38<br>
39<br>
40<br>
</div>