Wie behalte ich ein scrollbares Chat-Div am unteren Rand bei, wenn die Größe des Eingabefelds geändert wird?

Scrollbares Div bleibt am unteren Rand hängen, wenn das äußere Div seine Größe ändert

Übersicht

In Chat-Anwendungen ist es üblich, dass ein scrollbarer Nachrichtencontainer Platz einnimmt den größten Teil des Bildschirms. Wenn die Höhe des Eingabefelds jedoch dynamisch zunimmt, kann die Scrollposition des Benutzers gestört werden.

Das Problem

Wenn das Eingabefeld wächst, erhöht es effektiv die Höhe des äußeren Div, wodurch die Höhe des Eingabefelds erhöht wird drückt den Nachrichtencontainer nach unten. Dies führt dazu, dass der Benutzer die letzten Nachrichten aus den Augen verliert.

React-basierte Lösung

Ein Ansatz besteht darin, die Lebenszyklusmethode „componentDidUpdate“ von React zu verwenden, um die Höhe des Eingabefelds zu berechnen und den Nachrichtencontainer zu benachrichtigen, wenn sie sich ändert . Dies kann jedoch zu Leistungsproblemen und übermäßigem Nachrichtenaustausch führen.

CSS-Lösung mit Flexbox

Eine effizientere Lösung ist die Verwendung von CSS-Flexbox:

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

• Flexrichtung: Spaltenumkehr; Platziert die Nachrichten am unteren Rand des Containers.
• Dadurch wird sichergestellt, dass die Nachrichten auch dann sichtbar bleiben, wenn das Eingabefeld wächst.

Überlegungen

• IE/Edge/Firefox-Fehler: Diese Browser weisen einen Fehler auf, bei dem die Bildlaufleiste verschwinden kann, wenn Flex-Direction verwendet wird: Column-Reverse;.
• Problemumgehung: Um dieses Problem zu beheben, fügen Sie die folgenden Funktionen hinzu:

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

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

• Überprüfen Sie, ob sich der Container am befindet Unten und passen Sie die Bildlaufleiste an, wenn die Größe des Eingabefelds in diesen Browsern geändert wird.

Das obige ist der detaillierte Inhalt vonWie behalte ich ein scrollbares Chat-Div am unteren Rand bei, wenn die Größe des Eingabefelds geändert wird?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!