1

I am trying to make a chat box like facebook messenger. I am using max height and overflow but the scroll bar auto scroll to top when the chatarea overflow. How can I keep position of scroll bar at bot when the div overflow?

HTML

<div class="chatarea-cover">
  <div class="chatarea"></div>//chat messages will be pushed to here
</div>

CSS

.chatarea-cover {
  max-height: 200px;
  overflow-y: scroll;
}
.chatarea {
  padding-right: 10px;
  width: 300px;
  height: 200px;
  display: table-cell;
  vertical-align: bottom;
}

ChatbotMessage

Rayees AC
  • 4,426
  • 3
  • 8
  • 31
Bach Dao
  • 125
  • 1
  • 10

1 Answers1

0

You can use scrollIntoView Method If you want to show on top use true or if bottom false

<!DOCTYPE html>
<html>
<head>
<style>
.chatarea-cover {
  height: 300px;
  width: 200px;
  overflow: auto;
}
#chatarea {
  width: 200px;
}
</style>
</head>
<body>

<div class="chatarea-cover">
      <div id="chatarea">
        <p>chat messages will be pushed to here.</p>
        <p>chat messages will be pushed to here.</p>
        <p>chat messages will be pushed to here.</p>
        <p>chat messages will be pushed to here.</p>
        <p>chat messages will be pushed to here.</p>
        <p>chat messages will be pushed to here.</p>
        <p>chat messages will be pushed to here.</p>
        <p>chat messages will be pushed to here.</p>
      </div>
</div>
<script>
 document.getElementById("chatarea").scrollIntoView(false);;
</script>

</body>
</html>