TwitterのDM部分みたいに下にメッセージをどんどん追加する

TwitterのDM部分は、スクロールが最初から一番下に位置していて、一番上に持っていくと、無限スクロールによって、古いDMが読み込まれるような構造です。

最初に投稿した段階で、メッセージは一番下に来るようにするには、positionをabsoluteにしなくてはいけません。
ただし、positionをabsoluteにすると、overflow:scroll;が機能しませんので(※後で検証してみると、position:absolute;でも、top,left,right,bottomのすべてを指定していないとスクロールが表示されます)、データを追加していって、一定の高さを超えた段階でpositionをstaticにして、スクロールできるようにします。

そして、データを追加するたびに、スクロール位置は一番下に移動するようにしています。

■CSS部分

#dm_scroller{
  position:relative;
  width:450px;
  height:450px;
  overflow:scroll;
  overflow-x:hidden;
}

#dm_block{
  padding:0px;
  list-style-type:none;
  width:420px;
  bottom:0px;
}

#dm_block li{
  word-wrap:break-word;
}

■JavaScript(jQuery)部分

$(function(){
  var initial_dm_block_height = 420;

  $(document).on('click','#dm_btn',function(e){
    e.stopPropagation();
    e.preventDefault();
    if($('#dm_text').val() === ''){ return false; }
    $('#dm_block').append('<li style="border:solid 1px blue;">' + $('#dm_text').val() + '</li>');
    if($('#dm_block').height() > initial_dm_block_height){
      $('#dm_block').css('position','static');
      $('#dm_scroller').scrollTop($('#dm_block').height());
    }else{
      $('#dm_block').css('position','absolute');
    }
  });  

  if($('#dm_block').height() > initial_dm_block_height){
    $('#dm_block').css('position','static');
    $('#dm_scroller').scrollTop($('#dm_block').height());
  }else{
    $('#dm_block').css('position','absolute');
  }
});

■HTML部分

<div id="dm_scroller">
  <ol id="dm_block">
    <li>メッセージ1</li>
    <li>メッセージ2</li>
    <li>メッセージ3</li>
    <li>メッセージ4</li>
  </ol>
</div>
<input type="text" id="dm_text">
<input type="button" id="dm_btn">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

■参考リンク
JavaScriptでスクロールを最下部に移動する方法 - Qiita