Wie kann ich mithilfe von CSS dafür sorgen, dass ein scrollbares Div unten bleibt, wenn sich die Größe des äußeren Div ändert?

Scrollbares Div, um am unteren Rand zu bleiben, wenn sich die Größe des äußeren Div ändert

Eine Reihe von Chat-Anwendungen scrollen nach unten, auch wenn das Die Größe der Eingabe wird geändert, sodass der Benutzer weiterhin die neuesten Nachrichten sehen kann.

Die traditionelle Art, dies mit React zu implementieren, wäre die Verwendung von ComponentDidUpdate, um die Höhe der Eingabe bei jeder Änderung neu zu berechnen und den Nachrichtencontainer entsprechend zu aktualisieren.

Dies kann jedoch zu Leistungsproblemen führen, und es ist nicht ideal, Nachrichten auf diese Weise weitergeben zu müssen.

Gibt es eine bessere Möglichkeit, dies mit CSS zu implementieren?

2. Überarbeitung davon Antwort

flex-direction: columns-reverse; richtet Nachrichten am unteren Rand des Nachrichtencontainers aus, genau wie Skype und viele andere Chat-Apps.

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

Ein Nachteil bei der Verwendung von Flex-Direction: Column-Reverse; ist ein Fehler in IE/Edge/Firefox, bei dem die Bildlaufleiste nicht angezeigt wird.

Um dies zu beheben, können wir die folgenden Funktionen verwenden:

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

Und fügen Sie sie dann zu unserem hinzu Code wie folgt:

/* 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 */

Das obige ist der detaillierte Inhalt vonWie kann ich mithilfe von CSS dafür sorgen, dass ein scrollbares Div unten bleibt, wenn sich die Größe des äußeren Div ändert?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!