☰

データが追加されたときにdivの末尾まで自動スクロールするにはどうすればいいですか? [重複] 質問する

tag-icon • tag-icon javascript jquery html css
データが追加されたときにdivの末尾まで自動スクロールするにはどうすればいいですか? [重複] 質問する

次のようなスタイルtableの の内部があります:div

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

div十分なデータがテーブルに追加されると、垂直スクロール バーが表示されます。ただし、新しいデータが追加されたときに、要素が下部に自動的にスクロールするようにしたいと思います。

これを行うにはどの JavaScript コードを使用すればよいでしょうか? 必要に応じて JQuery のオプションも検討しますが、JavaScript ソリューションの方が望ましいです。

ベストアンサー1

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

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

おすすめ記事