溢出-y的滚动条从底部开始[重复]

【问题标题】：Scroll bar of overflow-y start from bottom [duplicate]溢出-y的滚动条从底部开始[重复]
【发布时间】：2021-01-11 01:21:54
【问题描述】：

我正在尝试制作一个像 facebook messenger 这样的聊天框。我正在使用最大高度和溢出，但是当聊天区域溢出时滚动条会自动滚动到顶部。 div溢出时如何保持滚动条在bot上的位置？

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

【问题讨论】：

标签： javascript html css

【解决方案1】：

可以使用 scrollIntoView 方法如果您想在顶部显示，请使用 true 或底部为 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>

【讨论】：