javascript - JavaScript を使用してテキストエリアをスクロールする

Question

jQueryを使用してテキストをテキストエリアに追加しています

var box = $('<textarea></textarea>')
    .attr({id: 'log_viewer',
           readonly: '',
       cols: 100,
       rows: 40})
    .appendTo($(outputEntity));

データが WebSocket から受信されると、テキストエリアのコンテンツに追加されます。

 ws.onmessage = function(msg) { 
     var data = decodeURIComponent(msg.data);

     data = data.replace('<', '&lt;');
     data = data.replace('>', '&gt;');

     box.append(data);
 }

私が必要とするのは、このボックスが自動的に一番下までスクロールして、ビューポートが常に出力の最後のページの中央に配置されるようにすることです。このトピックに関するいくつかの他のスタックオーバーフローの提案に従って、私は試しました:

 $('#log_viewer').scrollTop = $('#log_viewer')[0].scrollHeight - $('#log_viewer').height();

ただし、これは機能しません。少なくとも、私がアクセスできる Linux 上の Chrome や Firefox では機能しません。ボックスはスクロールしません。

このボックスを JS から一番下のページに自動スクロールするにはどうすればよいですか? append() を使用して出力を追加すると、基になるディメンション検出メカニズムが何らかの形で干渉されますか? append() はそこに行く正しい方法でもありますか?

それとも、テキストエリアをまったく使用せずに、スクロールバー付きの DIV を使用する必要がありますか? 確かに、私は HTML + CSS の時代にかなり遅れており、それを達成する最善の方法を正確に知りません。

ご提案いただきありがとうございます。