1

Can anyone suggest a way to make the contents of a div (when they exceed the size of the div) to scroll to the bottom.

According to this answer from Jim Hall as refined in comments you can do it by adding an extra div with the following:

display: flex; 
flex-direction: column-reverse

However, this is not working for me (contents just load scrolled to top with bottom content hidden.)

Here is my code:

CSS:

//The point of the next class is to force a scroll to the bottom but it is not working

.chatContainer {
  height: 500px;
  overflow: auto;
  display: flex;
  flex-direction: column-reverse;
}

.chatContents {
  width: 300px;
  border: solid 1px #EEE;
  display: flex;
  flex-direction: column;
  padding: 10px;
  max-height: 500px;
  overflow-y: scroll;
}

HTML:

<div class="chatContainer">
<div class="chatContents">
<div id = "bubbles"></div>
</div>
</div>

Would appreciate any suggestions on how to do this in pure CSS or with simple javascript (no jquery etc.)

Thanks for any suggestions.

user6631314
  • 1,751
  • 1
  • 13
  • 44

1 Answers1

1

Try limiting the size of the div which contains the chatbox kind of how i did in the following code:

var element = document.getElementById("chatbox");
element.scrollTop = element.scrollHeight;
.chatContainer {
  height: 500px;
  overflow: auto;
  display: flex;
  flex-direction: column-reverse;
}

.chatContents {
  width: 300px;
  border: solid 1px #EEE;
  display: flex;
  flex-direction: column;
  padding: 10px;
  max-height: 500px;
  overflow-y: scroll;
  height: 25vh;
  overflow-x: hidden;
}
<div class="chatContainer">
  <div class="chatContents" id="chatbox">
    <div id = "bubbles">
      hello
    </div>
    <div id = "bubbles">
      hello
    </div>
    <div id = "bubbles">
      hello
    </div>
    <div id = "bubbles">
      hello
    </div>
        <div id = "bubbles">
      hello
    </div>
    <div id = "bubbles">
      hello
    </div>
    <div id = "bubbles">
      hello
    </div>
    <div id = "bubbles">
      hello
    </div>
    <div id = "bubbles">
      hello
    </div>
    <div id = "bubbles">
      hellodjfdjfhdjfhsdhskfhsdkhfsdkhfjsdhf
    </div>
  </div>
</div>
Juan C
  • 82
  • 1
  • 10
  • by limiting the height of the chatbox, you are stopping it from growing as the comment numbers increase :) – Juan C Aug 12 '21 at 17:22
  • When I run the snippet, it scrolls to the top not the bottom. – user6631314 Aug 12 '21 at 17:46
  • I added some javascript. It should be scrolled to the bottom now. If you need it to update when a new comment is added I would follow the following post's javascript were I found this snip of code: https://stackoverflow.com/questions/18614301/keep-overflow-div-scrolled-to-bottom-unless-user-scrolls-up – Juan C Aug 12 '21 at 17:56