在聊天中显示

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

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