How Can I Make a Scrollable Div Stick to the Bottom Using CSS When the Outer Div Resizes?

Scrollable div to stick to bottom, when outer div changes in size

A number of chat applications scroll to the bottom, even when the input is resized, thus allowing the user to continue to see the latest messages.

The traditional way of implementing this with React would be to use componentDidUpdate, to recalculate the height of the input every time it changes and update the message container accordingly.

However, this can cause performance issues, and it's not ideal to have to pass messages around like this.

Is there a better way to implement this using CSS?

2nd revision of this answer

flex-direction: column-reverse; will align messages at the bottom of the message container, just like Skype and many other chat apps do.

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

One downside to using flex-direction: column-reverse; is a bug in IE/Edge/Firefox, where the scrollbar doesn't show.

To fix this, we can use the following functions:

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

And then add them to our code like so:

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

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