Wie bleibt ein scrollbares Div am unteren Rand eines in der Größe veränderbaren äußeren Div hängen?

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

In einer Chat-Anwendung ist es üblich, ein scrollbares Div innerhalb eines anderen Div zu haben, das das enthält Gesprächsverlauf. Wenn sich die Größe des äußeren Div ändert, beispielsweise wenn das Eingabefeld unten größer oder kleiner wird, sollte das scrollbare Div seine Position am Ende der Konversation beibehalten.

Lösung mit CSS

Verwendung der Flex-Richtung: Column-Reverse; Mit der Eigenschaft für das äußere Div können Sie dieses Verhalten ohne JavaScript erreichen. Diese Eigenschaft dreht im Wesentlichen die Reihenfolge der untergeordneten Elemente um und platziert das scrollbare Div unten.

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

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

Allerdingsdiese Lösung hat einen Nachteil: Sie kann dazu führen, dass die Bildlaufleiste verschwindet Bestimmte Browser wie Firefox, IE und Edge.

Lösung für die versteckte Bildlaufleiste

Um das Problem mit der versteckten Bildlaufleiste zu beheben, müssen Sie kann das folgende CSS hinzufügen:

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

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

Dadurch wird effektiv ein zweites scrollbares Div innerhalb des ersten erstellt, wodurch sichergestellt wird, dass die Bildlaufleiste sichtbar bleibt.

Implementierungsdetails

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

Im obigen Skript prüft die Funktion resizeInput(), ob sich die Bildlaufleiste am unteren Rand des scrollbaren Div befindet, und passt die Bildlaufposition bei Bedarf an.

Das obige ist der detaillierte Inhalt vonWie bleibt ein scrollbares Div am unteren Rand eines in der Größe veränderbaren äußeren Div hängen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!