Maison >interface Web >js tutoriel >Comment faire défiler un Div vers le bas dans une application de chat ?

Comment faire défiler un Div vers le bas dans une application de chat ?

Mary-Kate Olsen
Mary-Kate Olsenoriginal
2024-12-13 10:04:09420parcourir

How to Keep a Div Scrolled to the Bottom in a Chat Application?

Faire défiler vers le bas d'un Div

Dans une application de chat construite avec des requêtes Ajax, faire défiler le div des messages vers le bas est crucial. Pour y parvenir, nous pouvons exploiter diverses techniques JavaScript.

Garder la division en défilement vers le bas par défaut

Pour la div avec l'ID "défilement" et la hauteur spécifiée et débordement, nous pouvons utiliser le JavaScript suivant pour le faire défiler vers le bas initialement :

var scrollDiv = document.getElementById("scroll");
scrollDiv.scrollTop = scrollDiv.scrollHeight;

Faire défiler vers le Bottom Après une requête Ajax

Une fois qu'une requête Ajax a récupéré avec succès de nouveaux messages, nous devons ajuster la position de défilement du div en conséquence :

function updateMessages() {
    var scrollDiv = document.getElementById("scroll");
    scrollDiv.scrollTop = scrollDiv.scrollHeight;
}

Cette fonction peut être attachée en tant que rappel à l'événement « succès » de la requête Ajax. Cela garantira que le div défile vers le bas après le chargement de chaque nouvel ensemble de messages.

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!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn