Comment puis-je garder une division défilante bloquée en bas lorsque sa division externe est redimensionnée ?

La div défilante reste collée au bas lors du redimensionnement de la div externe

Cet article répond aux préoccupations concernant le comportement de défilement au sein d'une div externe redimensionnée de manière fluide. L'objectif est de maintenir une position de défilement près du bas du div interne, .messages-container, malgré tout changement de hauteur dans le div externe.

Le problème survient lorsque le champ .text-input se développe dynamiquement, provoquant l'utilisateur de perdre de vue les messages du bas de la conversation.

Solution utilisant CSS (flex-direction : column-reverse)

La solution préférée exploite la propriété flex-direction: column-reverse de CSS pour le div .messages-container. Cette approche aligne les messages au bas du conteneur, imitant le comportement observé dans les applications de chat populaires. De plus, cela garantit que la barre de défilement reste visible même lorsqu'aucun message n'est présent.

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

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

Attention et compatibilité avec le navigateur

Cependant, cette approche peut rencontrer un bug dans IE. /Edge/Firefox où la barre de défilement devient invisible.

Solution de contournement pour IE/Edge/Firefox

Pour résoudre ce problème, nous pouvons utiliser une solution de contournement qui imite le comportement de flex-direction : column-reverse.

// scroll to bottom
function updateScroll(el) {
  el.scrollTop = el.scrollHeight;
}

// only shift-up if at bottom
function scrollAtBottom(el) {
  return (el.scrollTop + 5 >= (el.scrollHeight - el.offsetHeight));
}

En incorporant ces fonctions dans notre code, nous pouvons garantir que IE/Edge/Firefox présente le même comportement de défilement qu'avec flex-direction : colonne inversée.

// ...

if (atbottom && (!isWebkit || isEdge)) {
  updateScroll(msgdiv);
}

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!