在聊天中显示

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

基本上，它所做的就是根据所有聊天气泡的总和来测量内容的高度，然后滚动该数量。每当用户点击、输入或接收新消息时，我都会调用此函数。