Maison > interface Web > tutoriel CSS > Comment puis-je garder une division défilante bloquée en bas lorsque sa division externe est redimensionnée ?

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

Barbara Streisand
Libérer: 2024-12-07 20:36:16
original
411 Les gens l'ont consulté

How Can I Keep a Scrollable Div Stuck to the Bottom When Its Outer Div Resizes?

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;
}
Copier après la connexion

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));
}
Copier après la connexion

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);
}
Copier après la connexion

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!

source:php.cn
Déclaration de ce site Web
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
Derniers articles par auteur
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal