How Can I Keep a Scrollable Div Stuck to the Bottom When Its Outer Div Resizes?

Scrollable Div Sticking to Bottom When Outer Div Resizes

This article addresses concerns regarding scrolling behavior within a fluidly resizing outer div. The goal is to maintain a scrolled position near the bottom of the inner div, .messages-container, despite any height changes in the outer div.

The issue arises when the .text-input field expands dynamically, causing the user to lose sight of the bottom messages in the conversation.

Solution Using CSS (flex-direction: column-reverse)

The preferred solution leverages CSS's flex-direction: column-reverse property for the .messages-container div. This approach aligns messages at the bottom of the container, mimicking the behavior observed in popular chat applications. Additionally, it ensures the scrollbar remains visible even when no messages are present.

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

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

Caveat and Browser Compatibility

However, this approach may encounter a bug in IE/Edge/Firefox where the scrollbar becomes invisible.

Workaround for IE/Edge/Firefox

To address this issue, we can employ a workaround that mimics the behavior of flex-direction: column-reverse.

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

By incorporating these functions into our code, we can ensure that IE/Edge/Firefox exhibits the same scrolling behavior as with flex-direction: column-reverse.

// ...

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

The above is the detailed content of How Can I Keep a Scrollable Div Stuck to the Bottom When Its Outer Div Resizes?. For more information, please follow other related articles on the PHP Chinese website!