Comment faire défiler automatiquement jusqu'à la fin de div lorsque des données sont ajoutées?

Question

J'ai un table à l'intérieur d'un div avec le style suivant:

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

Cela affiche une barre de défilement verticale une fois que suffisamment de données sont ajoutées à la table. Cependant, lorsque de nouvelles données sont ajoutées, j'aimerais que l'élément div défile automatiquement vers le bas.

Quel code JavaScript pourrais-je utiliser pour le faire? Je suis ouvert aux options de JQuery si nécessaire, mais je préférerais une solution JavaScript.

Answer 1

Si vous ne savez pas quand les données seront ajoutées à #data, vous pouvez définir un intervalle pour mettre à jour le scrollTop de l'élément vers son scrollHeight toutes les deux secondes. Si vous contrôlez le moment auquel les données sont ajoutées, appelez simplement la fonction interne de la fonction suivante une fois les données ajoutées.

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

Answer 2

var objDiv = document.getElementById("divExample");
objDiv.scrollTop = objDiv.scrollHeight;