Comment conserver une division de discussion défilante en bas lorsque le champ de saisie est redimensionné ?

Div défilable collée vers le bas lorsque la div externe change de taille

Aperçu

Dans les applications de chat, il est courant d'avoir un conteneur de messages défilant qui occupe la majeure partie de l'écran. Cependant, lorsque le champ de saisie augmente dynamiquement en hauteur, la position de défilement de l'utilisateur peut être perturbée.

Le problème

Lorsque le champ de saisie s'agrandit, il augmente effectivement la hauteur du div externe, ce qui pousse le conteneur de messages vers le bas. Cela fait perdre de vue à l'utilisateur les messages récents.

Solution basée sur React

Une approche consiste à utiliser la méthode de cycle de vie ComponentDidUpdate de React pour calculer la hauteur du champ de saisie et avertir le conteneur de messages s'il change. . Cependant, cela peut entraîner des problèmes de performances et une transmission excessive de messages.

Solution CSS utilisant Flexbox

Une solution plus efficace consiste à utiliser CSS flexbox :

.chat-window {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.chat-messages {
  flex: 1;
  height: 100%;
  overflow: auto;
  display: flex;
  flex-direction: column-reverse;
}

.chat-input {
  border-top: 1px solid #999;
  padding: 20px 5px;
}

• flex-direction : colonne inversée ; place les messages au bas du conteneur.
• Cela garantit que les messages restent visibles même lorsque le champ de saisie s'agrandit.

Considérations

• Bogue IE/Edge/Firefox : Ces navigateurs présentent un bug où la barre de défilement peut disparaître lors de l'utilisation de flex-direction : column-reverse;.
• Solution de contournement : Pour résoudre ce problème, ajoutez les fonctions suivantes :

function updateScroll(el) {
  el.scrollTop = el.scrollHeight;
}

function scrollAtBottom(el) {
  return (el.scrollTop + 5 >= (el.scrollHeight - el.offsetHeight));
}

• Vérifiez si le conteneur est au en bas et ajustez la barre de défilement lorsque le champ de saisie est redimensionné dans ces navigateurs.

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!