Wie kann ich ein scrollbares Div am unteren Rand hängen lassen, wenn sich die Größe seines äußeren Div ändert?

Scrollbares Div bleibt am unteren Rand hängen, wenn die Größe des äußeren Divs geändert wird

Dieser Artikel geht auf Bedenken hinsichtlich des Scrollverhaltens innerhalb eines sich fließend ändernden äußeren Divs ein. Das Ziel besteht darin, trotz etwaiger Höhenänderungen im äußeren Div eine gescrollte Position am unteren Rand des inneren Divs, .messages-container, beizubehalten.

Das Problem tritt auf, wenn das .text-Eingabefeld dynamisch erweitert wird, was zu Problemen führt Der Benutzer verliert die untersten Nachrichten in der Konversation aus den Augen.

Lösung mit CSS (Flex-Richtung: Column-Reverse)

Die bevorzugte Lösung nutzt die CSS-Eigenschaft „Flex-Direction: Column-Reverse“ für das .messages-container-Div. Dieser Ansatz richtet Nachrichten am unteren Rand des Containers aus und ahmt das Verhalten nach, das in beliebten Chat-Anwendungen beobachtet wird. Darüber hinaus wird sichergestellt, dass die Bildlaufleiste auch dann sichtbar bleibt, wenn keine Nachrichten vorhanden sind.

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

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

Vorbehalt und Browserkompatibilität

Dieser Ansatz kann jedoch auf einen Fehler im IE stoßen /Edge/Firefox, bei dem die Bildlaufleiste unsichtbar wird.

Workaround für IE/Edge/Firefox

Um dieses Problem zu beheben, können wir eine Problemumgehung anwenden, die das Verhalten von Flex-Direction: Column-Reverse nachahmt.

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

Durch die Integration dieser Funktionen In unseren Code können wir sicherstellen, dass IE/Edge/Firefox das gleiche Scrollverhalten wie bei Flex-Direction zeigt: spaltenumgekehrt.

// ...

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

Das obige ist der detaillierte Inhalt vonWie kann ich ein scrollbares Div am unteren Rand hängen lassen, wenn sich die Größe seines äußeren Div ändert?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!