Comment garder une division défilante collée au bas d'une division externe redimensionnable ?

Div défilant à coller vers le bas, lorsque le div externe change de taille

Dans une application de chat, il est courant d'avoir un div défilant dans un autre div qui contient le historique des conversations. Lorsque la taille du div externe change, par exemple lorsque le champ de saisie en bas augmente ou diminue, le div défilant doit conserver sa position au bas de la conversation.

Solution utilisant CSS

Utilisation de flex-direction: column-reverse; propriété sur le div externe, vous pouvez obtenir ce comportement sans aucun JavaScript. Cette propriété inverse essentiellement l'ordre des éléments enfants, en plaçant le div déroulant en bas.

.outer-div {
  display: flex;
  flex-direction: column-reverse;
}

.scrollable-div {
  flex: 1;
  overflow: auto;
}

Cependant, cette solution présente un inconvénient : elle peut entraîner la disparition de la barre de défilement dans certains navigateurs comme Firefox, IE et Edge.

Solution à la barre de défilement cachée

Pour résoudre le problème de la barre de défilement cachée, vous pouvez ajoutez le CSS suivant :

/* Reset webkit, including edge */
.scrollable-div-text {
  overflow: visible;
}

@supports (-ms-accelerator: true) {
  .scrollable-div-text {
    overflow: auto;
  }
}

Cela crée effectivement un deuxième div déroulant dans le premier, garantissant que la barre de défilement reste visible.

Détails de mise en œuvre

// Check if at bottom of scrollable div
function scrollAtBottom(el) {
  return (el.scrollTop + 5 >= (el.scrollHeight - el.offsetHeight));
}

// Update scroll position if at the bottom
function updateScroll(el) {
  el.scrollTop = el.scrollHeight;
}

// Function to resize input and adjust scroll position if needed
function resizeInput() {
  const scrollableDiv = document.getElementById('scrollable-div');
  const input = document.getElementById('input');
  
  // Toggle input height
  input.style.height = input.style.height === '40px' ? '120px' : '40px';

  // Check if scrolled to the bottom and update scroll position if needed
  if (scrollAtBottom(scrollableDiv)) {
    updateScroll(scrollableDiv);
  }
}

Dans Dans le script ci-dessus, la fonction resizeInput() vérifie si la barre de défilement est en bas du div défilant et ajuste la position de défilement si nécessaire.

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!