Comment faire défiler automatiquement jusqu'à la fin d'un div lors de l'ajout de données

Lorsque vous travaillez avec du contenu Web dynamique, il est souvent souhaitable que des éléments tels que les div défilent automatiquement vers vers le bas à mesure que de nouvelles données sont ajoutées. Il s'agit d'une exigence courante pour des éléments tels que les fenêtres de discussion ou les tableaux de données à défilement sans fin.

Considérez un scénario dans lequel vous avez un tableau entouré d'un div avec une hauteur fixe et vous souhaitez qu'il défile automatiquement jusqu'à la fin. lorsque de nouvelles données sont ajoutées. Cet article explore une solution JavaScript pour obtenir ce comportement.

Approche JavaScript

Utilisation d'un intervalle :

Si le moment de l'ajout des données est inconnu, vous pouvez définir un intervalle pour mettre à jour périodiquement la propriété scrollTop du div afin qu'elle corresponde à sa scrollHeight. Cela garantit que le div défilera toujours vers le bas, même si de nouvelles données sont ajoutées entre les intervalles.

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

Dans cet exemple, la fonction setInterval s'exécute toutes les 5 secondes (5 000 millisecondes) et met à jour la propriété scrollTop du div avec sa scrollHeight. Cela fait défiler efficacement le div jusqu'à la fin.

Implémentation à la demande :

Si vous contrôlez le moment où les données sont ajoutées au div, vous pouvez implémenter le défilement comportement manuellement en appelant la fonction suivante après avoir ajouté de nouvelles données :

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

Cette fonction prend un élément comme argument et définit sa propriété scrollTop sur sa scrollHeight, ce qui fera défiler l'élément vers le bas. Appelez simplement cette fonction chaque fois que de nouvelles données sont ajoutées au div pour obtenir l'effet de défilement automatique souhaité.