データが追加されたときに DIV を自動的に一番下までスクロールするにはどうすればよいですか?

データ追加時に DIV を最後まで自動スクロールする

高さが制限された DIV 内のデータを表示する場合、多くの場合、次のように DIV を最後まで自動的にスクロールすることが望ましいです。新しいデータが追加されました。これにより、ユーザー エクスペリエンスが向上し、手動でスクロールしなくても最新の情報が表示されるようになります。

CSS 構成

DIV 内で垂直スクロールを有効にするには、その CSS overflow-y プロパティを次のように設定する必要があります。 「visible」に固定高さを指定します。例:

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

JavaScript ソリューション

データの追加時に DIV を自動的に一番下までスクロールするには、次の JavaScript コードを使用できます。

function scrollToBottom(element) {
  element.scrollTop = element.scrollHeight;
}

This関数は DOM 要素を引数として受け取り、そのscrollTopプロパティをscrollHeightプロパティと等しく設定します。これにより、要素が一番下までスクロールします。

使用法

データがいつ DIV に追加されるか正確にわからない場合は、通常の時点でscrollToBottom 関数を呼び出すことができます。間隔、例:

window.setInterval(function() {
  var elem = document.getElementById('data');
  scrollToBottom(elem);
}, 5000); // Run every 5 seconds

また、データを追加するタイミングを制御する場合は、後で単純にscrollToBottom関数を呼び出すこともできます。新しいデータを追加します。

以上がデータが追加されたときに DIV を自動的に一番下までスクロールするにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。