在聊天中显示[关闭]

Question

为了正确显示聊天窗口，我以以下代码结束：

function baja_el_chat() {
  var height = 0;
  $('div#my-conversation .message').each(function(i, value){
      height += parseInt($(this).height());
  });

  height += '';

  $('div#my-conversation').animate({scrollTop: height});
}

Answer 1

几周前我从头开始制作了一个聊天窗口。浏览器构建 div 堆栈的方式将使最新消息按预期隐藏在窗口限制之下。我也遇到了同样的情况，所以我构建了这个 Javascript/jQuery 函数：

function baja_el_chat() {
  var height = 0;
  $('div#my-conversation .message').each(function(i, value){
      height += parseInt($(this).height());
  });

  height += '';

  $('div#my-conversation').animate({scrollTop: height});
}

基本上，它的作用是根据所有聊天气泡的总和测量内容的高度，然后滚动该数量。每次用户按回车键或收到新消息时，我都会调用此函数。