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

Faire défiler vers le bas de la division ?

Lors de la création d'une application de chat interactif à l'aide de requêtes Ajax, un défi courant consiste à garantir que les messages sont automatiquement divisés défile vers le bas à mesure que de nouveaux messages arrivent. Cet article répond à deux questions clés liées à cette problématique :

1. Comment faire défiler le div vers le bas par défaut à l'aide de JavaScript ?

Pour que le div défile vers le bas sans compter sur les actions de l'utilisateur, utilisez le code JavaScript suivant :

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

Ce code définit une variable objDiv pour représenter l'élément avec l'ID « your_div ». Il définit ensuite la propriété scrollTop de cet élément sur sa scrollHeight. Cela déplace effectivement la barre de défilement vers la position la plus basse.

2. Comment faire défiler Div vers le bas après une requête Ajax ?

Pour conserver la position de défilement souhaitée même après une requête Ajax, exécutez le code JavaScript de la question 1 dans la fonction de rappel de réussite de la requête Ajax. Voici un exemple :

$.ajax({
  url: "messages.php",
  success: function(data) {
    var objDiv = document.getElementById("messages");
    objDiv.scrollTop = objDiv.scrollHeight;
  }
});

Dans cet exemple, lorsque la requête Ajax à "messages.php" réussit, elle met à jour le contenu HTML dans le div "messages". Le code JavaScript suivant ajuste la position de défilement vers le bas du div.

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!