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

Défilement automatique jusqu'à la fin d'un div lors de l'ajout de données

Dans un document HTML, un tableau est enfermé dans un div avec des styles spécifiés qui limitent le débordement horizontal tout en permettant la visibilité de la barre de défilement verticale. L'objectif est d'automatiser le défilement du div vers le bas lorsque de nouvelles données sont ajoutées au tableau.

Solution JavaScript :

Pour y parvenir, une fonction d'intervalle JavaScript peut être employé. Cette fonction met périodiquement à jour la propriété scrollTop du div pour qu'elle corresponde à sa scrollHeight. Cela garantit que le div défile automatiquement vers le bas lorsque des données sont ajoutées.

Le code suivant montre comment cela peut être implémenté :

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

Invocation d'événement personnalisé :

Si vous contrôlez le moment de l'ajout des données, une approche alternative consiste à appeler manuellement la fonction après avoir ajouté de nouvelles données. Cela élimine le besoin d'une fonction d'intervalle et offre une plus grande flexibilité dans le contrôle du comportement de défilement.

Pour implémenter cela, appelez la fonction interne du code ci-dessus après avoir ajouté des données à la table :

elem.scrollTop = elem.scrollHeight;

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!