データ追加時に Div の最後まで自動的にスクロールする方法

動的 Web コンテンツを操作する場合、多くの場合、div などの要素が自動的に次の位置までスクロールすることが望ましいです。新しいデータが追加されると下に表示されます。これは、チャット ウィンドウや無限にスクロールするデータ テーブルなどの要素に共通の要件です。

高さが固定された div で囲まれたテーブルがあり、最後まで自動スクロールするシナリオを考えてみましょう。新しいデータが追加されたとき。この記事では、この動作を実現するための JavaScript ソリューションについて説明します。

JavaScript アプローチ

間隔の使用:

データ追加のタイミングが不明な場合は、 div のscrollTopプロパティをそのscrollHeightと一致するように定期的に更新する間隔を設定できます。これにより、間隔の間に新しいデータが追加された場合でも、div が常に一番下までスクロールするようになります。

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

この例では、setInterval 関数が 5 秒 (5000 ミリ秒) ごとに実行され、div のscrollTop プロパティをそのscrollHeight で更新します。これにより、div が最後まで効果的にスクロールされます。

オンデマンド実装:

データが div に追加されるタイミングを制御できる場合は、スクロールを実装できます。新しいデータを追加した後に次の関数を呼び出して動作を手動で変更します:

function scrollToEnd(elem) {
  elem.scrollTop = elem.scrollHeight;
}

この関数は要素を引数として受け取り、そのscrollTopプロパティをscrollHeightに設定します。これにより、要素が一番下までスクロールされます。新しいデータが div に追加されるたびにこの関数を呼び出すだけで、目的の自動スクロール効果を実現できます。