Comment faire défiler automatiquement les pages jusqu'à la fin de la division 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 ont été ajoutées au tableau. Cependant, lorsque de nouvelles données sont ajoutées, j'aimerais que la barre de défilement verticale s'affiche. div pour un défilement automatique vers le bas.

Quel code JavaScript pourrais-je utiliser pour ce faire ? Je suis ouvert à des options en JQuery si nécessaire, mais je préférerais une solution en JavaScript.

Answer 1

Si vous ne savez pas quand les données seront ajoutées à #data vous pourriez définir un intervalle pour mettre à jour le scrollTop de l'élément en fonction de son scrollHeight toutes les deux secondes. Si vous voulez contrôler le moment où les données sont ajoutées, il suffit d'appeler l'interne de la fonction suivante après l'ajout des donné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;

Answer 3

Que diriez-vous d'ajouter une ancre au bas du tableau, puis de modifier l'attribut window.location.hash au nom de cette ancre après chaque mise à jour des données ?

Il se peut que vous deviez changer le dièse en quelque chose d'autre, puis revenir à cette ancre pour que le navigateur déplace le défilement.

EDIT : Je ne suis pas sûr que ce soit ce que vous vouliez dire. Cette réponse fera défiler la fenêtre entière jusqu'au bas de la division. Si vous voulez dire que la division elle-même comporte une barre de défilement que vous souhaitez déplacer, essayez l'une des autres réponses (peut-être celle de Valamas) ou placez l'ancre à l'intérieur de la division, en bas de celle-ci.