CSS 在固定高度内自动向上滚动

Question

我有一个固定高度的消息框，它显示多条消息。如何使用 css 确保滚动条始终位于底部，即显示最后一个条目？

目前，随着越来越多的 .message-box 进入 .chat-box-main，里面的一切都保持静态。查看最后一个条目的唯一方法是手动向上滚动。如何自动向上滚动？

<div class="chat-box-main">

  {{#each messages}}
    <div class="message-box">{{text}}</div>
  {{/each}}

</div>

CSS:

.chat-box-main {
height:250px;
overflow:auto;
}

我正在使用 meteor 并在创建模板时运行此函数。我会更新我的问题。由于所有 div 都“ react 性地”插入到我的辅助函数中，因此我试图弄清楚每次在滚动 div 中插入新的 div 时如何运行此计算

Answer 1

我创建了以下适用于您的案例的代码段。纯 CSS 是不可能的，所以这利用了 JavaScript/jQuery。

$(document).ready(function(){
  var $elem = $('.container');
  var height = $elem[0].scrollHeight;

  $elem.scrollTop(height);
});

.container{
  height: 50px;
  background:red;
  overflow:scroll;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  foo<br >
  foo<br >
  foo<br >
  foo<br >
  foo<br >
  foo<br >
  foo<br >
  foo<br >
  foo<br >
  bar
</div>