[解決済み] データ追加時にdivの末尾まで自動スクロールさせるには？重複

質問

を持つ table の中に div の中に、以下のようなスタイルで記述します。

#data {
    overflow-x:hidden;
    overflow-y:visible;
    height:500px;
}

これは、テーブルに十分なデータが追加されると、垂直スクロールバーが表示されます。しかし、新しいデータが追加されたときには div 要素で下まで自動スクロールさせたい。

これを行うには、どのようなJavaScriptコードを使用することができますか？必要であれば、JQueryのオプションにオープンですが、JavaScriptのソリューションを希望します。

どのように解決するのですか？

にデータが追加されるタイミングがわからない場合。 #data にデータが追加されるタイミングがわからない場合、数秒ごとに要素のscrollTopとscrollHeightを更新する間隔を設定することができます。データが追加されるタイミングを制御するのであれば、データが追加された後に以下の関数の内部を呼び出すだけです。

window.setInterval(function() {
  var elem = document.getElementById('data');
  elem.scrollTop = elem.scrollHeight;
}, 5000);