Question

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

目前，随着.message-box越多.chat-box-main进入<div class="chat-box-main"> {{#each messages}} <div class="message-box">{{text}}</div> {{/each}} </div>，内部的所有内容都保持不变。查看最后一个条目的唯一方法是手动向上滚动。如何自动向上滚动？

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

的CSS：

@ensure_csrf_cookie
def csrf_view(request):
    return HttpResponse('', content_type="text/plain")

我正在使用meteor并在创建模板时运行此功能。我会更新我的问题。由于所有div都在我的帮助函数中被“反应”插入，我试图找出每次在滚动div中插入新div时如何运行此计算

Answer 1

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

＆＃13;

metadata.json

＆＃13;

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

＆＃13;

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

＆＃13;

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

1 个答案: