Comment puis-je créer un div défilant vers le bas à l'aide de CSS lorsque le div externe est redimensionné ?

Div défilable pour rester en bas, lorsque la div externe change de taille

Un certain nombre d'applications de chat défilent vers le bas, même lorsque le l'entrée est redimensionnée, permettant ainsi à l'utilisateur de continuer à voir les derniers messages.

La manière traditionnelle d'implémenter cela avec React serait d'utiliser composantDidUpdate, pour recalculer la hauteur de l'entrée à chaque fois qu'elle change et mettre à jour le conteneur de messages en conséquence.

Cependant, cela peut entraîner des problèmes de performances, et ce n'est pas idéal de devoir transmettre des messages comme celui-ci.

Existe-t-il une meilleure façon d'implémenter cela en utilisant CSS ?

2ème révision de ceci réponse

flex-direction : colonne-inverse ; alignera les messages au bas du conteneur de messages, tout comme Skype et de nombreuses autres applications de chat.

.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;
}

.chat-input-text {
  width: 60%;
  min-height: 40px;
  max-width: 60%;
}

Un inconvénient de l'utilisation de flex-direction : column-reverse ; est un bug dans IE/Edge/Firefox, où la barre de défilement ne s'affiche pas.

Pour résoudre ce problème, nous pouvons utiliser les fonctions suivantes :

// 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;
}

Et puis les ajouter à notre codez comme ceci :

/* fix for IE/Edge/Firefox */
var isWebkit = ('WebkitAppearance' in document.documentElement.style);
var isEdge = ('-ms-accelerator' in document.documentElement.style);
var tempCounter = 6;

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

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

/* temp. buttons for demo */
button {
  width: 12%;
  height: 44px;
  margin-left: 5%;
  vertical-align: top;
}

/* begin - fix for hidden scrollbar in IE/Edge/Firefox */
.chat-messages-text {
  overflow: auto;
}

@media screen and (-webkit-min-device-pixel-ratio:0) {
  .chat-messages-text {
    overflow: visible;
  }
  /*  reset Edge as it identifies itself as webkit  */
  @supports (-ms-accelerator:true) {
    .chat-messages-text {
      overflow: auto;
    }
  }
}

/* hide resize FF */
@-moz-document url-prefix() {
  .chat-input-text {
    resize: none;
  }
}

/* end - fix for hidden scrollbar in IE/Edge/Firefox */

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!